I want to allow user to drag and drop UI elements. I've 'container' and 'control', control may be in container, containers may include other containers (this is important requirement). I created simple prototype using
jQuery.
HTML:
<div class="one">
<div class="control">Control 1</div>
<div class="control">Control 2</div>
<div class="control container">
Container drag area
<div class="control">Subcontrol 1</div>
<div class="control">Subcontrol 2</div>
<div class="control">Subcontrol 3</div>
<div class="control">Subcontrol 4</div>
<div class="control">Subcontrol 5</div>
<div class="control">Subcontrol 6</div>
<div class="control">Subcontrol 7</div>
<div class="control">Subcontrol 8</div>
<div class="control">Subcontrol 9</div>
</div>
<div class="control">Control 3</div>
Then I created sortables using jQueryUI:
$('.one').sortable({
items: 'div.control',
placeholder: 'placeholder',
forcePlaceholderSize: true
});
Now when I'm trying to drag "Subcontrol 8" and place it between "Subcontrol 2" and "Subcontrol 3" for example I'm getting jumpy effect, you can observe it here:
http://jsbin.com/egipu4/2
Interesting thing is - when I remove ability to drag "container" then it becomes smooth and perfect (you can see this on jsbin example below "jumpy" example, you can't drag using "Container drag area" span). I tried different "nested" plugins and techniques, google'd for a long time and the only one that worked was on this page:
(StackOverflow doesn't allow me to post more than one like, google for "Brian Swartzfager's Blog: Nested List Sort Demo" should be first, sorry!)
But it does work great only in jQuery1.2 and very old jQueryUI. If I include latest
jQuery (1.3/1.4) and UI (1.7/1.8) it gets jumpy as well. What am I doing wrong?
