CODEWITHSUNDEEP
javascriptjquery-uidrag-and-drop
Sandeep
Sandeep

Reputation: 473

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

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'
        });
    });

Upvotes: 2

Views: 2299

Answers (3)

BatteryHorse
BatteryHorse

Reputation: 25

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.

Upvotes: 0

mariomc
mariomc

Reputation: 975

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.

Upvotes: 4

Ninjanoel
Ninjanoel

Reputation: 2914

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.

Upvotes: -1

Related Questions