jquery - 如何修复 jqueryUI 容差 :intersect when sorting is animated

Question

我有一个自定义的动画可排序，唯一的问题是选项

tolerance : "intersect"

行为不符合预期。我期望的是，当一个元素被拖动到另一个元素上，并且重叠的元素与拖动的元素重叠 +50% 时，排序开始。

然而，这似乎是 jqueryUI 中的一个错误，它实际上需要 100% 与 intersect 重叠，而不是 50%。

我在这个线程中找到的解决方案不适用于我的代码，因为我在排序时使用克隆来为元素设置动画。

jQuery UI sortable tolerance option not working as expected

鉴于我的情况和代码，我该如何解决这个问题？

是否有已知的解决方法？

我意识到这是同一个问题，但我的情况不同，也许有更好的方法来解决这个问题，然后在旧问题中。

这是我的代码:

http://jsbin.com/otoquh/19/edit

$("#original_items li").each(function(){
  var item = $(this);
  var item_clone = item.clone();
  item.data("clone", item_clone);
  var position = item.position();
  item_clone.css("left", position.left);
  item_clone.css("top", position.top);
  $("#cloned_items").append(item_clone);
});

$("#original_items").sortable({
  start: function(e, ui) {
    ui.helper.addClass("exclude-me");
    $("#original_items li:not(.exclude-me)").css("visibility", "hidden");
    ui.helper.data("clone").hide();

  },
stop: function(e, ui){
  $("#original_items li.exclude-me").each(function() {
    var item = $(this);
    var clone = item.data("clone");
    var position = item.position();
    clone.css("left", position.left);
    clone.css("top", position.top);
    clone.show();
    item.removeClass("exclude-me");

  });
  $("#original_items li").css("visibility", "visible");
},
  change: function(e, ui) {
    $("#original_items li:not(.exclude-me, .ui-sortable-placeholder)").each(function() {
      var item = $(this);
      var clone = item.data("clone");
      var position = item.position();
      clone.stop(true, false);
      clone.animate({
        left: position.left,
        top: position.top
      }, 500);

    });
  },
  revert: 500,
  axis: "y"
});

Answer 1

尝试将tolerance与cursorAt一起使用。

我对您的代码进行了以下更改:

$("#original_items").sortable({
  tolerance:"pointer",
  cursorAt:{ top: 50 },
  start: function(e, ui) {
    ui.helper.addClass("exclude-me");
    $("#original_items li:not(.exclude-me)").css("visibility", "hidden");
    ui.helper.data("clone").hide();

  },
stop: function(e, ui){
  $("#original_items li.exclude-me").each(function() {
    var item = $(this);
    var clone = item.data("clone");
    var position = item.position();
    clone.css("left", position.left);
    clone.css("top", position.top);
    clone.show();
    item.removeClass("exclude-me");

  });
  $("#original_items li").css("visibility", "visible");
},
  change: function(e, ui) {
    $("#original_items li:not(.exclude-me, .ui-sortable-placeholder)").each(function() {
      var item = $(this);
      var clone = item.data("clone");
      var position = item.position();
      clone.stop(true, false);
      clone.animate({
        left: position.left,
        top: position.top
      }, 500);

    });
  },
  revert: 500,
  axis: "y"
});

演示:http://jsbin.com/otoquh/23/edit

希望这对您有所帮助，如果您有任何疑问，请告诉我!

---

链接:

• http://api.jqueryui.com/sortable/#option-cursorAt