jQuery UI 没有创建占位符

Question

我正在尝试使现有的 div 列表可排序。我被可排序小部件添加的占位符所困扰。如果我查看网站上的演示，我可以看到拖动的项目在我拖动时在列表标记中移动。但在我的示例中，我只能看到样式占位符，但它不会在元素之间移动。并且拖动的项目总是会回到我释放的起点。它是否无法按预期与 div 一起使用，或者我在这里缺少什么？

<div class="dummy-deviceList">
  <div class="dummy-device ui-sortable" data-dummy-device-id="">
    <div class="dummy-device-main">
      <div class="dummy-icon dummy-icon-deviceStatus-ok"></div>
      <div class="dummy-device-descr">
        <div class="dummy-device-descr-main">FOO1</div>
        <div class="dummy-device-descr-more">BAR1</div>
      </div>
      <div class="dummy-link dummy-link-context dummy-icon dummy-icon-context"></div>
      <div class="dummy-link dummy-link-centerMap dummy-icon dummy-icon-centerMap"></div>
    </div>
  </div>

  <!-- More items here -->
</div>

演示

http://jsfiddle.net/fuAL2/

Answer 1

我不确定小提琴中的代码是原始源代码还是 jQueryUI 完成运行后生成的标记。但是您不需要为.sortable() 添加任何 类来工作。只需在您希望排序的子元素上调用 .sortable() 就足够了。

因此，您应该从代码中删除 ui-sortable 类，并在调用 .sortable() 的选择器中使用父容器，例如只是 $(".dummy-deviceList").sortable(); not $(".dummy-deviceList .dummy-device").sortable();。然而，.dummy-device-descr 上的 float:left 似乎也导致占位符无法正常工作。

占位符浮动问题看起来可能是 jQueryUI 的 ticket#7501（在撰写本文时打开），但是我怀疑浮动可排序元素与绝对定位的占位符冲突只是这种情况，因为元素正在排序已经浮出正常流量。

所以你需要做的改变是：

1. 删除.dummy-device-descr float:left
2. 从 class="dummy-device" 元素中移除 ui-sortable 类
3. 将选择器从 $(".dummy-deviceList .dummy-device") 更改为 $(".dummy-deviceList")

除此之外，我还要补充一点，您的代码有点受Divitis 的影响，并且肯定会从一些整理中受益（出于链接文章中的原因）。