jQuery UI Sortable：執行拖放和重新排序交互

Question

我有一組物品可以拖入可排序的作曲家。

在作曲家中拖動和排序項目的表現遲滯且滯後。當物品被重新排列時，我會期待更多的響應，但是我發現在作曲家的物品周圍移動時會有延遲。 demos on the jQuery site要快得多。

有誰知道是什麼原因導致響應速度下降？代碼如下，以飽滿的演示在這裏：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

我通過設置選項tolerance: pointer的排序，在這個互動的情況下工作得更好提高性能/響應能力。