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(); 不 $(".dummy-deviceList .dummy-device").sortable();。但是，似乎float:left上存在.dummy-device-descr会导致占位符无法正常运行。

使用jQueryUI，占位符浮动问题看起来可能是ticket#7501（在编写时打开），但是我怀疑浮动可排序元素与绝对定位的占位符冲突的情况很简单被分类的已经从正常流动中浮出。

所以你需要做的改变是：

删除.dummy-device-descr float:left
从class="dummy-device"元素
将选择器从$(".dummy-deviceList .dummy-device")更改为$(".dummy-deviceList")

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

jQuery UI没有创建占位符

1 个答案: