jQueryUI - Drag and Drop issue - dragged element goes behind other DOM elements

jquery drag and drop list
jquery draggable droppable
jquery ui draggable
draggable js example
jquery draggable containment
jquery draggable clone
jquery sortable div drag and drop
drag and drop div using jquery

I am trying to implement drag and drop between 2 Div's

Please refer my fiddle below : http://jsfiddle.net/sandeepkram/SAUCa/

This layout is a replica of my application. In the fiddle you can see that if you drag an element within the first div (on left side) it keeps moving within that div forever - though if you just motion to mouse to drag and drop it onto the right side div, it does actually work.

Here the problem is the indefinite scrolling / dragging of element within left side div. I dont know what the problem is here -

In my application I have another problem, in that when I drag an item out of the left side div, it vanishes though I can drop the cursor on right side div and the drop appears to have worked correctly.

Need help to know why the dragged element is disappearing.

I have looked up all the questions and resources related to this, sortables etc on stackoverflow and the net - but no use.

I have also tried to use the "stack" option but no use

$.each($("ul#secondaryKPIList ul > li"), function (index, tListItem) {
        $(tListItem).addClass("SecondaryKPIDraggable");
        $(tListItem).draggable({
        revert : 'invalid',
        stack: '.SecondaryKPIDraggable'
        });
    });

To solve the visual issue, you could just remove the overflow changes

overflow-y: auto;
overflow-x: hidden;

on the .KpisListItems setting it as the following fiddle: http://jsfiddle.net/GEWLs/2

These rules are messing with the way jQuery sortable handles and calculates the positioning, hence the strange behavior.

Draggable, To solve the visual issue, you could just remove the overflow changes overflow-y: auto; overflow-x: hidden;. on the .KpisListItems setting it as  Draggable() Method. This method allows the elements to be dragged with the help of mouse. Using jQuery UI, we can make the DOM(Document Object Model) elements to drag anywhere within the view port. This can be done by clicking on the draggable object by mouse and dragging it anywhere within the view port.

I know I'm kinda late, but heres is another solution that I find easier, just add the following css:

.ui-draggable { z-index:9999; }

9999 is probably overkill though.

Dragged element hiding behind when using jQuery UI Draggable , Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport. Also perhaps your draggable item has a lot more stuff (many many divs, spans, other DOM elements) than I have. I have a few spans inside a div element – and it runs quite smooth. I had another project (not this Angular Drag and Drop project) where I was running jQuery.find on a timeout that occured every 50ms.

My guess is it's because you are using 'list' markup. If you tried using 'divs' instead for your draggable items I'd wager it would work as it should.

element draggable underlying others elements · Issue #237 · taye , Hi, I want to constrain events drag and drop to an axis, in scheduler. Documentation Check up-to-date tutorials, guides and other supporting I have issue with dragged event hiding below the next upper/down line (div.​dhx_matrix_line I think). I've seen a lot of DOM elements with hidden overflow. If you’re making a group of elements draggable — such as a set of cards — you usually want the currently-dragged element to appear on top of the other elements in the group. By setting the stack option to a selector that matches the group of elements, you can make sure this happens. jQuery UI adjusts the z-index properties of the elements so that the currently-dragged element is brought to the top.

Draggable Elements That Push Others Out Of Way, element draggable underlying others elements #237 element (or are the last children) and the DOM order isn't important, then the easiest That way the most recently dragged element always has the highest z-index. jQuery-UI draggable has a z-index option for this sort of issue; I don't know what the  E.g. click on element, hold down mouse button, drag mouse cursor, element drags with the mouse, release mouse button to release element. Or the touch equivalents. Fortunately this is well-tread territory. Time tested tools like jQuery UI offer Draggable (and other similar methods) to make this easy.

Draggables going behind other elements, Time tested tools like jQuery UI offer Draggable (and other similar methods) class name) that gets inserted amongst the slides where that slide would drop but jQuery UI just rips that placeholder out of the DOM when it goes away you can create the same effect where dragging an element moves others out of the way. Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.

jQuery UI, The problem comes when dragging the divs out of the Source - they will <script src="js/jquery.ui-1.0/ui.draggable.js"></script> have been redesigned to have the possibility to have the helper or the original element lying in  Description: Allow elements to be moved using the mouse. Make the selected elements draggable by mouse. If you want not just drag, but drag & drop, see the jQuery UI Droppable plugin, which provides a drop target for draggables. The draggable widget uses the jQuery UI CSS framework to style its look and feel.

Comments
  • Thank you :) That helped resolve the issue in fiddle as well as my app.
  • Okay, I will give that a shot but, the list items are used because of a specific requirement / dependency elsewhere in code. Any way I can get it to work with the current layout.