Question

我希望有人可以帮我确定为什么这个可排序列表表现得如此奇怪。

该页面显示了一个＆＃39;阶段＆＃39; （空白放置区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();

如果有任何关于修复或解释原因的建议，我将不胜感激。

更新：

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

我在＆＃39;阶段添加了一系列空元素。在STOP通话中： $("#row1").append('<div class="spacer_cell"></div>');

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

这可确保您始终在另外两个元素之间删除新元素。

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

由于

大卫

Answer 1

您的可排序div的固定高度为80px，因此您只能将元素放入该高度内。第三排坐在80px下方。

你应该让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;
}

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

1 个答案: