2

カスタマイズされたアニメーション化されたソータブルがあります。唯一の問題はオプションです

tolerance : "intersect"

期待どおりに動作しません。私が期待しているのは、要素が別の要素の上にドラッグされ、重なった要素がドラッグされた要素によって +50% 重なったときに、並べ替えが開始されることです。

ただし、これは jqueryUI のバグのようで、実際には 50% ではなく 100% 交差でオーバーラップする必要があります。

このスレッドのようにSOで見つけたソリューションは、ソート中にクローンを使用して要素をアニメーション化するため、私のコードでは機能しません。

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 に答える