jQuery UI Sortable：ドラッグアンドリオーダーのやりとりのパフォーマンス

Question

ソート可能なコンポーザーにドラッグできる項目があります。

コンポーザ内の項目をドラッグして並べ替えるパフォーマンスが遅く、遅れます。私はアイテムが再配置されるにつれ、より多くの反応を期待していますが、作曲家のアイテムを移動するときに、その種類を達成するのが遅れていることがわかりました。 demos on the jQuery siteははるかに高速です。

応答性が低下している原因を知っている人はいますか？私は、この相互作用の場合にはうまく機能ソート可能にオプションtolerance: pointerを設定することにより、パフォーマンス/応答性を改善http://codepen.io/redmondo/pen/YZporb

$(function() { 
    // Add items to picker. 
    for (i = 0; i < 10; i++) { 
    var $item = createItem(i); 
    $("#picker").append($item); 
    } 

    // Set up sortable. 
    $("#composer") 
    .sortable({ 
     items: "> .item", 
     receive: function(event, ui) { 
     var data = ui.item.attr("data-item"); 
     var dataAttr = "[data-item='" + data + "']"; 
     // If the element was actually dropped in the composer 
     if ($("#composer .item"+ dataAttr).length > 0) { 
      $("#picker .item" + dataAttr) 
      .draggable("disable") 
      .addClass("inactive"); 
     } 
     } 
    }) 
}); 

function createItem(i) { 
    var $item = $("<div>" + i + "</div>") 
    .addClass("item") 
    .attr("data-item", i) 
    .draggable({ 
     connectToSortable: ".connected-sortable", 
     revert: "invalid", 
     revertDuration: 100, 
     appendTo: "body", 
     helper: "clone", 
     refreshPositions: true 
    }); 

    return $item; 
} 

Answer 1

：コードは、ここでは完全なデモで、以下の通りです。