刷新助手位置

Question

我正在使用 jquery sortable 跨多个容器对元素进行排序。

我将助手选项设置为 'clone'，就像这样

$("#sup").sortable({
   helper: "clone"
});

所以这里发生的事情是，当一个元素开始拖动时，jQuery 创建一个副本并将其附加到主体，这成为实际被拖动的元素（助手），而不是原始元素.

我的助手可能会在拖动开始时改变位置。然而，jQuery 认为助手就在它放置的位置，即使我使用边距更改了它的位置，当将元素放入容器中时，助手实际上并没有在它上面（因为我改变了助手位置）。

问：如何让jQuery在更改后重新计算助手的位置？

$("#sup").sortable({
   helper: "clone",
   start: function(event, ui) {
       var marginsToSet = ui.item.data().sortableItem.margins;

       // helper position changed
       ui.helper.css('margin-left', marginsToSet.left);
       ui.helper.css('margin-top', marginsToSet.top);
   }
});

示例：http://codepen.io/anon/pen/qZaNJZ您可以看到占位符突出显示将转到下一个容器，即使它没有完全悬停它。因为方块位置不是 jquery 设置的。

Answer 1

您可以更改 sortable 的 tolerance，以便它使用光标的位置而不是辅助块来检测要移动到哪个 container/target。

我有 forked your Codepen，或在下面重新创建：

var sortableInitialised = false;

$(function() {
  var $div = $("div");

  var $input = $('input[type=checkbox]').on('change', function() {
    var isChecked = $(this).prop('checked');
    makeSortable($div, isChecked ? 'pointer' : 'intersect');
  });

  makeSortable($div, 'intersect');
});

function makeSortable(elem, tolerance) {
  if (sortableInitialised) {
    // if changing, start from scratch
    elem.sortable('destroy');
  }
  elem.sortable({
    connectWith: "div",
    appendTo: document.body,
    placeholder: "placeholder",
    helper: "clone",
    tolerance: tolerance,
    start: function(event, ui) {
      var marginsToSet = ui.item.data().sortableItem.margins;
      ui.helper.css('margin-left', marginsToSet.left);
      ui.helper.css('margin-top', marginsToSet.top);
    }
  });
  sortableInitialised = true;

  // update heading
  $('h2').text("tolerance: '" + tolerance + "'" + (tolerance === 'intersect' ? ' (default)' : ' (proposed)'));
}

h2, p {
  margin: 0;
  font-family: sans-serif;
}
div {
  width: 150px;
  height: 100px;
  background-color: #f7f7f7;
  margin: 10px;
  display: inline-block;
}
span {
  display: block;
  width: 50px;
  height: 50px;
  background-color: black;
  margin: 0 auto;
  margin-top: 25px;
  box-sizing: border-box;
}
.placeholder {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

<h2>tolerance: 'intersect' (default)</h2>
<div><span></span>
</div>
<div></div>
<div></div>

<p>
  <label>
    <input type="checkbox">Use pointer tolerance
  </label>
</p>

刷新助手位置

Refresh Helper Position

jquery

jquery-ui

jquery-ui-sortable

helper