Question

我在容器中有可排序的元素，这些元素居中（margin：0 auto）。问题是当我开始排序时，所选元素会跳到左边，因为它们绝对是位置。

这是一个说明问题的小提琴： http://jsfiddle.net/annam/35MC3/28/

我尝试在排序开始之前获取偏移位置（使用mousedown侦听器），然后在排序开始时将此位置应用于元素：

function onMouseDown()
{
   startPosition = $(this).offset();
}

function startSort(event,ui)
{
   $(ui.item).css(startPosition);
}

没用。然后我尝试将ui.sortable.originalposition明确地设置为特定的顶部和左侧位置，这也不起作用。

有什么建议吗？

请注意，我无法更改HTML的结构并引入新容器。

Answer 1

试试这个：http://jsfiddle.net/lotusgodkk/35MC3/113/

$('#container').sortable({
    axis: 'y'
});
$('.draggable:not(.ui-sortable-helper)').mouseover(function () {
    var p = $(this).offset();
    $(this).css({
        top: p.top + 'px',
        left: p.left + 'px'
    })
});

说明：ui-sortable-helper是分配给可排序项目的类。所以这里我们只设置项目的初始top,left值，只有当它悬停但没有排序时。它之所以不起作用，是因为ui.offset undefined函数中start为{{1}}。

Answer 2

您可以使用helper选项返回使用position() jQuery UI实用程序方法定位的自定义元素，如下所示：

$('#container').sortable({
  helper: function(event, elm) {
    return $(elm).clone().position({
      my: "left",
      at: "left",
      of: elm
    });
  },
  axis: 'y'
})

* {
  margin: 0; /*for stack snippet demo*/
  padding: 0;
}
#container {
  position: relative;
  width: 200px;
  height: 300px;
  text-align: center;
  border: 1px solid green;
}
.draggable {
  width: 100px;
  height: 100px;
  background: yellow;
  margin: 10px auto;
  cursor: move;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="container">
  <div class="draggable"></div>
  <div class="draggable"></div>
</div>

Jquery UI可以使用居中元素进行排序

2 个答案: