Jquery 可排序项目未附加到水平列表的末尾

Question

我希望有人能帮我找出为什么这个可排序列表的行为如此奇怪。

该页面显示一个“舞台”（空白放置区域 div），在其下方，有一个要拖放到舞台区域的单词列表。

问题是：当您将单词拖到舞台上时，一切都会按预期运行，直到您添加的单词超过了一行。溢出的单词会自动移动到新行。

新行不会接受添加到其末尾的单词，而只会接受之前放置的单词之间的单词。

请查看我的JSFiddle 来说明问题：

var oldList, newList, item;
$('.parent').sortable({
    revert: "100",
    helper: 'clone',
  start: function (event, ui) {
    item = ui.helper;
    newList = oldList = item.parent().parent();
    $('.word').removeClass('correct ok wrong selected');
    $(item).addClass('picky');
  },
  stop: function (event, ui) {
    $(item).removeClass('picky');
  },
  change: function (event, ui) {
    if (ui.sender) newList = ui.placeholder.parent().parent();
  },
  connectWith: "#wordcontainer, .parent"
}).disableSelection();

如果有任何关于修复或解释为什么会发生这种情况的建议，我将不胜感激。

更新：

我决定用不同的方式解决这个问题。

我在 STOP 调用的“舞台”中添加了一系列空元素： $("#row1").append('<div class="spacer_cell"></div>');

然后我将空格分隔符强制到列表的末尾： $('.spacer_cell').appendTo('#row1');

这可确保您始终在其他两个元素之间放置一个新元素。

这有点粗糙，但似乎提供了预期的效果。

谢谢

大卫

Answer 1

您的可排序 div 具有 80 像素的固定高度，因此您只能将元素放置在该高度内。第三排坐在 80 像素以下。

您应该让 div #row1 给出动态高度。你可以这样做：

.parent.ui-sortable{
  height: 100%;
  width: 300px;
}

（你必须删除内联样式）

另一个例子：http://jsfiddle.net/Lhtort8e/

更新：
为了更好地使用“标签”，您应该使用 display: inline-block 而不是 float: left

.word {
  display: inline-block;
  vertical-align: top;
}