2

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

tolerance : "intersect"

没有按预期运行。我期望的是，当一个元素被拖动到另一个元素上时，重叠的元素被拖动的元素重叠 +50%，排序开始。

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

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

jQuery UI 可排序容差选项未按预期工作

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

是否有已知的解决方法？

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

这是我的代码：

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"
});
4

2 回答 2

2

尝试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

希望这会有所帮助，如果您有任何问题，请告诉我！

链接：

于 2013-01-13T23:34:30.467 回答
0

发生的事情是光标需要超过元素顶部（或左/右等）的 50%。这就是为什么您似乎必须将其拖过元素本身的原因。

我个人更喜欢这个tolerance : "pointer"选项，它允许元素在光标进入目标元素后立即替换目标元素！可能是也可能不是您正在寻找的东西。

https://api.jqueryui.com/sortable/#option-tolerance

于 2015-08-24T17:22:48.227 回答