jQuery UI可排序 - 單擊時拖動元素

我有兩個塊，「draggable」和「sortable」。在「可拖動」內部，我有幾件可以拖動它們以「排序」的項目。jQuery UI可排序 - 單擊時拖動元素

我想有可能點擊「可拖動」內的項目並自動將其拖入「可排序」。

這裏是我的JS：

$(".sortableList").sortable({ 
    placeholder: 'ui-state-highlight', 
}); 

$('.sortableList').disableSelection(); 

$(".draggable").draggable({ 
connectToSortable: '.sortableList', 
cursor: 'pointer', 
helper: 'clone', 
revert: 'invalid', 
start: function (event, ui) { 
    $(this).addClass('testing'); 
} 
});

，這是一個jsbin

任何想法如何，我可以拖動的元素，以「排序」通過點擊？

來源

2014-09-29 agis

我想我沒跟着。你希望能夠從你周圍的靜態項目中創建新的'draggables'附加到'sortable'列表中？ – tfrascaroli 2014-09-29 12:27:55

不，我想通過單擊要拖動的元素來模仿拖動元素到sortableList中的行爲。 – agis 2014-09-29 12:30:10

好的，所以你有**以外的物品**可排序的列表，你想添加你想要的，保持他人，對嗎？ – tfrascaroli 2014-09-29 12:30:55

添加一個點擊處理程序，告訴它將目標追加到排序。然後刷新選擇。

http://jsbin.com/fukutomometu/5/

$("#sidebar-wrapper").on("click", ".draggable", function(e){ 
    $(".sortableList").append(e.target).sortable('refresh'); 
});

您也可以添加和刪除目標相關類，如果你不希望它是可拖動了。

和$.clone而不是$.append如果您不想移動原件。並改變整理了一下：

$(e.target).clone().appendTo(".sortableList");

相關問題：

Add to Jquery-ui sortable list

來源

2014-09-29 13:02:42 slicedtoad

我試過用克隆替換append但它不起作用，有什麼建議嗎？ – agis 2014-09-29 13:14:21

@agis我編輯過。克隆不copyTo，它只是克隆並返回克隆。 – slicedtoad 2014-09-29 13:18:37

你的問題是不是與編碼，它與缺乏一些CSS的。

補充一點：

.sortableList li { 
    width:150px; /*This was already set*/ 
    height:250px; 
    background-color:blue; 
}

而且，考慮使用和id的排序列表，而不是一類。

來源

2014-09-29 13:07:54 tfrascaroli

jQuery UI可排序 - 單擊時拖動元素

回答

相關問題