I have some droppable areas, which are also draggable. It can happen that two or more droppable areas will get behind each other. Is there a way to drop a draggable item only into the area that is in the front? (z-index)
The situation is now, that the item gets added to all the areas, that are overlapping.
Thank you
Ok I have now a quite good solution and I want to share it with you guys...
I have build a small plugin
https://github.com/vaceta/jquery-top-droppable
Related
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.
Im reading through the jquery docs, and Im thinking outterHeight/outterWidth is what I am looking for. But not really sure how to use it for my needs.
Overall I have an element I want to add a submenu to, on click, I want this menu to line up directly under the trigger element. But I need the right edge of the menu element to line up with the right edge of the trigger element. Which the lining up piece of it, I'm sure a little trial and error will get me there its just finding those outter edges and where they are as far as the window/screen/what ever is concerned. So I can nudge them into place.
Key reason I am going this route is cause this menu element is attached to a handful of trigger elements scattered through the UI, and are dynamically recreated for the given trigger element.
Anyway anyone know a good way to achieve my goal? Is outterHeight/width my ideal solution?
I think a better solution would be to use offset or position like the jQuery UI datepicker does it for example. You create your menu at body level and you position it according to the offset of the element that triggers the menu.
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/
I have three div areas. Creating an element, which is draggable() with jQuery UI, I can drag it all over the screen. Dropping it in a special area, then I can not drag it any more.
I created a full working demo: http://jsbin.com/enusu4/2/
There you can create a draggable element which is placed into the left green area. Dragging it to the middle or right green area, I can not drag the element.
I increment the zIndex of the elements, but it does not work.
Does anyone can help me, what's wrong?
Best Regards.
Add z-index:-1; for 2nd and 3rd divs.
I have had no luck figuring out how to do this. I was originally using jQuery UI sortable, but I am not sure it will work with this workflow:
I have a table with multiple columns. I want to be able to drag an element in column A AND the element next to it in column B at once and drop them into a different position. After the drop, the element from column A & B will still be side-by-side but not at their original Y coordinate. The key is dragging them at once & allowing other elements that cross their paths to "move out of the way".
I was able to achieve this with 1 element using jquery UI sortable, but am not sure how to make this work with two side-by-side elements. Any suggestions any help is more than welcome. Thanks in advance.
Can't you just use row's as handlers?
By your description A & B are always 1 element being dragged.