javascript - 使用 jQuery ui sortable 将项目排序到固定容器中

Question

我的可排序列表有问题。我有两个容器，里面都有可排序的列表。两个容器之一具有固定位置。虽然我可以将项目从固定容器移动到另一个容器，但我无法将项目从非固定容器移动到固定容器。

$('ul').sortable({
  connectWith: $('ul'),
  items: '> li'
});

.fixed {
  position:fixed;
  left:100px;
  top:0;
}

<div class="fixed">
  <ul>
    <li>f1</li>
    <li>f2</li>
    <li>f3</li>
  </ul>
</div>
<div class="not-fixed">
  <ul>
    <li>nf1</li>
    <li>nf2</li>
    <li>nf3</li>
  </ul>
</div>

您可以在那里看到问题:http://jsfiddle.net/mQP8p/

固定容器必须具有固定位置(容器必须垂直和水平跟随页面)

有人以前见过这个吗？

谢谢!

Answer 1

看起来您的 not-fixed 类元素没有设置宽度，因此它出现在 fixed 类元素之上。这就是为什么即使您将鼠标拖动到固定列表上，它仍然会对您的第一个列表进行排序。尝试一些简单的方法，例如在 not-fixed 类上设置宽度。

.not-fixed {
   width: 50px;
}

Fiddle

注意:更改父 div 的宽度将影响您可以拖动元素的区域。尝试一下，看看什么宽度最适合您的目的。