I'm working on a new project and I have sidebars I want the user to move around and order them as they want.
Like clicking the header of the box and move it to the top will result the box at the top.
How do I do that?
jsBin demo
$('.sidebar').draggable();
http://jqueryui.com/demos/draggable/
Take a look a jQuery UI draggable functionality.
Related
I'm new to angular. I'm creating vertically split panel with "drag handle" to adjust top and bottom tree panel. I've implemented three stages toggle but I'm not be able to execute dragging of height of the div with mouse event vise-versa. I do not want to use renderer or HostListener or ng-split directive maybe with custom function/method would be nice. can anybody look at my code and help me out. here's what I've done so far.
https://stackblitz.com/edit/angular-hm4zy9?file=src%2Fapp%2Fapp.component.html
My suggestion is to subscribe to drag event, also do not forget to add draggable="true" to your draggable element. The calculations seem to be correct from the first sight. Check the demo, I've changed just a bit of your code
I have an application built using angular2 and my web page content is divided into two panels as columns. I need to implement a functionality to be able to resize both panels by selecting either right edge of left panel or by selecting left edge of right panel.
Please let me know if there is a way to achieve this using angular or html,css or javascript.
I know css3 has resize property but this allows you to resize by holding one corner of div and not looking for this feature
Example: I want to implement similar functionality as w3schools HTML editor (https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default)
If we open above url we can resize both left and right panels by dragging the middle bar horizontally. Please refer below screenshot
Take a look at Resizable jQuery, for example:
$("#div1").resizable({
handles: 'e, w'
});
I'm working on a menu you can arrange by dragging and dropping menu items on top of eachother. Dropping an item ontop of another should create a submenu and when dropping it on the left/right/top/bottom it should place it accordingly.
To "detect" which direction the menu should be placed, I was thinking of adding overlays to the menu item like so (pardon my painting skills):
The red boxes are the overlay divs I want to add.
My question is: is this the right way to do? Or would a javascript solution with some sort of mouse coordinates in relation to the menu be better? What method would you use (can be any, not just the two I pointed out)?
You can use the library JQuery UI to sort and drag&drop.
If the item is located exactly above the other, you need to add it to the item.
I would go for checking mouse events and their coordinates to keep the markup and domtree clean.
You can use Knockout.js with some modification.
Check this article. Looks like it might help You.
You migh also chectk out this github project.
I'm trying to make a jQuery dropdown (more like drop right!) menu. What I need is that when the mouse is over the home button (for example), the other buttons slides out, and the content box slides in.
I want the black box (content) to slide in from the end of the button. Right, the box is sliding in from the left edge of the screen...but I don't want that box to be under the "home" button, I want it to be next to it.
Here's my fiddle : http://jsfiddle.net/TvNcD/
It's buggy right now...
But I think it's something fairly simple to fix.
Hope it works for you although I think there should be a better way to do this using CSS3...http://jsfiddle.net/TvNcD/18/
How can we make a div movable from here to there. I tried using JQuery Drag, Drop & sortable kind of things but my requirements is not fulfilling.
I have a plenty of DIVs on the page and i need to drag & drop a DIV_1 onto DIV_2,then DIV_2 should be adjust/set in place of DIV_1. Such drag n drop kind of things works when i have very few DIV but it doesn't work when i have many DIVs inside differnt ROW(div) & COLOUMN(div).
Does anybody tell me?
You've got to use jQuery Draggable & Droppable ... programming it yourself might be a bigger pill than you'd want to swallow.
http://jqueryui.com/demos/draggable/
http://jqueryui.com/demos/droppable/