jQuery UI可排序 - 单击时拖动元素

Question

我有两个街区，＆＃34;可拖动＆＃34;和＆＃34;可排序＆＃34;。内部＆＃34;可拖动＆＃34;我有几件物品可以将它们拖到＆＃34;可排序＆＃34;。

我想有可能点击里面的项目＆＃34; draggable＆＃34;并自动将其拖入＆＃34; sortable＆＃34;。

这是我的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

任何想法如何将元素拖动到＆＃34;可排序＆＃34;点击它们？

Answer 1

添加一个点击处理程序，告诉它将目标附加到sortable。然后刷新选择。

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

Answer 2

你的问题不在于编码，而在于缺少一些css。

添加：

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

另外，请考虑使用id作为可排序列表，而不是类。