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

时间:2013-08-02 16:08:16

标签: javascript jquery jquery-ui jquery-ui-sortable fixed

我的可排序列表存在问题。我有两个容器,里面都有可排序的列表。两个容器中的一个具有固定位置。虽然我可以将物品从固定容器移动到另一个容器,但我无法将物品从未固定的容器移动到固定容器。

$('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/

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

有人之前见过这个吗?

谢谢!

2 个答案:

答案 0 :(得分:0)

诀窍是让'非固定'div具有position: absolute。 一个工作小提琴: http://jsfiddle.net/mQP8p/1/

答案 1 :(得分:0)

看起来您的not-fixed类元素不是设置的宽度,因此它出现在fixed类元素上。这就是为什么即使您拖动fixed列表,它仍然会对您的第一个列表进行排序。尝试像设置not-fixed类的宽度一样简单。

.not-fixed {
   width: 50px;
}

Fiddle

注意:更改父div的宽度会影响您可以拖动元素的区域。玩弄它,看看哪种宽度最适合您的目的。