使用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

訣竅是使“非固定” div具有position: absolute 。 有效的小提琴： http ： //jsfiddle.net/mQP8p/1/

Answer 2

看起來您的not-fixed類元素not-fixed寬度，因此它出現在fixed類元素上。 這就是為什么即使您將鼠標懸停在fixed列表上，它仍在對您的第一個列表進行排序的原因。 嘗試一些簡單的事情，例如在not-fixed類上設置寬度。

.not-fixed {
   width: 50px;
}

小提琴

注意：更改父div的寬度將影響您可以拖動元素的區域。 試一試，看看哪種寬度最適合您的目的。