1

我正在尝试使现有的 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/

4

1 回答 1

1

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

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

占位符浮动问题看起来可能是带有jQueryUI的ticket#7501(在撰写本文时打开),但是我怀疑浮动可排序元素与绝对定位的占位符冲突的情况很简单,因为被排序的元素已经浮动超出正常流量。

所以你需要做的改变是:

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

除此之外,我还要补充一点,您的代码正在遭受一点Divitis的困扰,并且肯定会从一些整理中受益(出于链接文章中的原因)。

于 2012-11-05T15:53:10.703 回答