Question

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?

Answer 1

in case you are still interested, I recently developed a plugin which makes nested sorting work with the latest jQuery and jQuery UI