Question

I have an customized animated sortable, the only problem is the option

tolerance : "intersect"

Doesnt behave as expected. What i expect is, when an element is dragged over another one, and the overlapped element is overlapped +50% by the dragged one the sorting starts.

However this seems to be a bug in jqueryUI and it actually needs to be 100% overlapped with intersect instead of 50%.

Solutions i found on SO like in this thread dont work with my code, because I use clones to animate the elements while sorting.

jQuery UI sortable tolerance option not working as expected

How could I approach this problem given my situation and my code?

Are there known workarounds for this?

I realise this is the same question, but my situation is different and maybe there are better ways to solve this, then in the old question.

Here my Code:

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

Try using tolerance along with cursorAt.

I have made the following changes to your code:

$("#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"
});

DEMO: http://jsbin.com/otoquh/23/edit

Hope this helps and let me know if you have any questions!

---

LINKS:

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