Question

我正在尝试在页面上使用jQuery UI sortable（http://jqueryui.com/demos/sortable/）来拖拽几个DOM元素。所有元素都具有绝对定位，这就是问题的起点。似乎jQuery UI认为所有的li都放在左上角（这是占位符最终的位置）。

我在这里创建了一个jsfiddle：http://jsfiddle.net/winter/4ePe6/问题非常明确。

我想要实现的目标如下：当项目1在项目2和3之间被删除时，项目2被移动到项目1所在的位置，项目1采用项目2：s位置，项目3和项目3停留在它们所在的位置。在放下占位符之前显示放置项目1的位置，即项目2在放弃之前的实际移动。

提前致谢。

Answer 1

jQuery UI可能会做出一些假设，但是占位符特有的问题是它的样式是为相对而非绝对定位设置的。由于没有其他相对定位的元素，占位符最终位于起始位置。

要将占位符放在移动元素所在的位置，您需要做两件事：

为占位符提供自己的类和
根据占位符所在的元素设置占位符的位置。

例如，它的类和风格：

.my-placeholder {
  background:red;
  height: 1.5em;
  line-height: 1.2em;
  position: absolute;
  top: 20%;
  width: 10%;
}

现在剩下的就是根据它所替换的元素设置其“左”位置。这可以通过设置“开始”事件处理程序来完成，以便在拖动开始时执行此操作。

$("#sortable").sortable({
    placeholder: "my-placeholder",
    start: function(event, ui) {
        $(".my-placeholder").css("left", ui.originalPosition.left);
    },
});

Answer 2

通过跳过绝对位置来解决这个问题，然后在li和ul周围的绝对定位div包装之间用填充来解决这个问题。

Answer 3

我可以让它工作...... 但是在拖动时必须将$ window.scrollTop（）添加到项目中。

$tracksSortable = $tracks
    .sortable('destroy')
    .disableSelection()
    .sortable({
        update:function(){
        },
        sort: function(event, ui) {
            $(ui.item).css({marginTop:$window.scrollTop()+'px'});
        },
        beforeStop: function(event, ui) {
            $(ui.item).css({marginTop:'0'});
        },
        items         : '.track',
        axis          : 'y',
        scroll        : true,
        containment   : 'body',
        placeholder   : 'trackPlaceHolder',
        distance      : 10,
        delay         : 500,
        revert        : false,
        cursorAt      : {top:15}
    });

Answer 4

有两种方法可以实现这一目标。您可以使用nth-child或nth-type-of选择器的一些CSS技巧将绝对定位应用于索引而不是直接应用于元素。因此，当由于可排序插件的工作方式而导致项目在DOM树中移动时，它们将捕获正确的位置属性，因为索引将保持不变。

另一种方法是使用插件的sortchange事件，只要列表中的项目顺序发生更改，就会触发该事件。因此，在事件功能中，您需要遍历项目并重新应用正确的定位。

有关如何使用这两种方法的详细信息，请参阅this blogpost：

如何使用绝对定位获得jQuery UI可排序工作？

4 个答案: