jquery - draggable items stack on top of each other in a sortable -


I have two lists which are sortable via jquery-ui . Each list contains list item which is draggable :

Under normal use, in which I pull those objects at a relatively normal speed (note ... normal one There is a vague description, but I can not think of a better one), dragged objects into any list without any issues and dropped Or is rearranged in its lists:

Enter the image details here

However, if I drag them fast from the list or in another list or in my list, then they believe they are stacked on top of each other and the people below The only way to see if you try to move the top one, but sometimes I want to Even after dragging around the top-object and trying to rearrange them, I can not find missing (possibly bottom items):

& Lt; Ul class = "sortable" & gt; & Lt; Li class = "dragable Yuri-state-default" & gt; Item 6 & lt; / Li & gt; & Lt; Li class = "dragable Yuri-state-default" & gt; Item 7 & lt; / Li & gt; & Lt; Li class = "dragable Yuri-state-default" & gt; Item 8 & lt; / Li & gt; & Lt; Li class = "dragable Yuri-state-default" & gt; Item 9 & lt; / Li & gt; & Lt; Li class = "dragable Yuri-state-default" & gt; Item 10 & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; Div id = "selected-group" class = "noselect" & gt; & Lt; H1 class = "group-header ui-widget-header" & gt; Group 2 & lt; / H1> & Lt; Ul class = "sortable" & gt; & Lt; Li class = "dragable Yuri-state-default" & gt; Item 1 & lt; / Li & gt; & Lt; Li class = "dragable Yuri-state-default" & gt; Item 2 & lt; / Li & gt; & Lt; Li class = "dragable Yuri-state-default" & gt; Item 3 & lt; / Li & gt; & Lt; Li class = "dragable Yuri-state-default" & gt; Item 4 & lt; / Li & gt; & Lt; Li class = "dragable Yuri-state-default" & gt; Item 5 & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt;

CSS :

  .sortable {list-style-type: none; Margin: 0 px 0 px 10 px 0 px; Padding: 0; Limit: 1px solid black; Minimum height: 40px; } .sortable & gt; Li {Margin: 1px; Padding: 5px; } # Available groups, # selected groups {width: 170px; Select user: none; Margin: 10px 150px 10px 0 pixels; Minimum-height: 300px; Swim left; }  

javascript :

  $ ("Sortable"). Sortable ({revert: "invalid"}); $ ("Draggable"). Draggable ({connectToSortable: ".sortable", back: "invalid"});  

I'm trying to solve it for a few days and can not seem to solve the problem. How can I stop overlapping "bugs" due to quick dragging / dropping?

Edit:

Here is JSFiddle:

Very strange error I saw the console whether any exception is increasing or not seeing that it pops up at a time when dragging items spiradially:

  Unkit type error: The property of zero 'jquery' can not be read '0' -ui.js: $ 5679 Widget._clear jquery-ui.js: 5679 (anonymous function) jquery-ui.js: $ 415 Widget._mouseStop jquery-ui.js: 4946 (anonymous function) jquery-ui.js: 415 (anonymous function) jquery-ui.js: 2403jQuery.extend.each jquery.js: 657 $ .ui.plugin.add.drag Jquery-ui.js: 2304 $ .ui.plugin.call jquery-ui.js: $ 304. Widget._trigger jquery-ui.js: 2218 (anonymous function) jquery-ui.js: $ 415. Videtk_mausdreg jquery-ui.js: 1799 (anonymous function) jquery-ui.js: 415 $ Vijetk_ mouseMove jquery-ui.js: 992 (anonymous function) jquery-ui.js: 415_mouseMoveDelegate jquery-ui.js: 955jQuery .event.dispatch jquery.js: 5095elemData.handle  

I returned : "invalid" to sortable and the error went away .

Edit:

I think the easiest way to accomplish what I've tried for jQuery UI documentation is:


Comments

Popular posts from this blog

java - Can't add JTree to JPanel of a JInternalFrame -

javascript - data.match(var) not working it seems -

javascript - How can I pause a jQuery .each() loop, while waiting for user input? -