Question

我想允许用户拖放UI元素。我有'容器'和'控制'，控制可能在容器中，容器可能包括其他容器（这是重要的要求）。我使用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>

然后我使用jQueryUI创建了sortables：

$('.one').sortable({
  items: 'div.control',
  placeholder: 'placeholder',
  forcePlaceholderSize: true
});

现在，当我试图拖动“Subcontrol 8”并将它放在“Subcontrol 2”和“Subcontrol 3”之间时，例如我得到了跳跃效果，你可以在这里观察它：

http://jsbin.com/egipu4/2

有趣的是 - 当我删除拖动“容器”的能力然后它变得平滑和完美（你可以在jsbin示例下面看到“跳跃”的例子，你不能使用“容器拖动区域”跨度拖动）。我尝试了不同的“嵌套”插件和技术，谷歌很长一段时间，唯一有效的插件和技术在这个页面上：（StackOverflow不允许我发布多个类似的，google为“Brian Swartzfager的博客：嵌套列表排序演示”应该是第一个，抱歉！）

但它只在jQuery1.2和非常古老的jQueryUI中运行良好。如果我包含最新的jQuery（1.3 / 1.4）和UI（1.7 / 1.8），那么它也会变得很快。我做错了什么？

Answer 1

如果您仍然感兴趣，我最近developed a plugin使嵌套排序与最新的jQuery和jQuery UI一起使用

jQuery嵌套sortables跳跃行为

1 个答案: