工作我可拖動的項目(#doc-editor-options ul li)的ul，用於丟棄這些項目(#doc-editor-content)和區域內的ul舉辦這些項目(#items-holder)，這是排序的區域。這種拖放只是單向的，只有列表中的物品才能被拖放到持有者身上。使用jQuery UI可拖動，可放開和可排序

現在，當我從列表中拖動項目拖放到另一個列表中，drop回調.droppable()被調用了兩次：我有

$("#doc-editor-options ul li").draggable({ 
    helper: 'clone', 
    connectToSortable: '#item-holder', 
    containment: $(".doc-editor") 
}); 
$("#doc-editor-content").droppable({ 
    drop: function(e, ui){ 
     console.log('dropped'); 
    } 
}); 
$("#item-holder").sortable({ 
    placeholder: 'placeholder-highlight', 
    cursor: 'pointer', 
});

兩個問題。我認爲這與可排序的#item-holder有關。我希望只有當我將一個物品放入列表中時纔會被解僱，並且只在回叫時知道該物品的event和ui。

我還需要功能，默認情況下，items-holder不可排序。唯一可以排序的時間是當你拖動並懸停一個項目。所以我不能默認排序列表，但是如果我將一個項目拖到它上面，我可以選擇將該項目放在列表中的哪個位置（即列表現在可排序），並且一旦我放棄它，列表就變成不可分割再次。

編輯：我想出＃2，我需要結合mousedown至使分選將可拖動的項目然後禁用它mouseup。＃1仍然有問題，看起來有些sortable事件正在觸發drop回撥，當我放入物品或將物品懸停在物品架上時。

來源

2011-03-30 roflwaffle

1：

你滴（）被調用兩次，因爲connectToSortable也觸發降（）。

我的建議是刪除$（「＃doc-editor-content」）。droppable（），然後將receive（e，ui）處理程序添加到您的可排序對象中。

2：

您的修復程序有效。不過，我會建議一個更容易的選擇：始終啓用排序並添加選項「句柄：h2」。（選擇任何在您的LI中不存在的標籤。）這會讓您進入列表，但禁用用戶在原地排序。

實施例：

$('#item-holder').sortable({ 
    placeholder: 'placeholder-highlight', 
    cursor: 'pointer', 
    handle: 'h2', 
    receive: function(e, ui) { 
    console.log('dropped'); 
    } 
});

來源

2011-03-30 20:11:24

使用jQuery UI可拖動，可放開和可排序

回答

1：

2：

相關問題