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可排序 - 单击时拖动元素

回答

相关问题