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

我有两个块，“可拖动”和“可排序”。 在“可拖动”内部，我可以将它们拖动到“可排序”的项目很少。

我希望有可能单击“draggable”中的项目并自动将其拖动到“可排序”。

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

任何想法如何通过点击它们将元素拖动到“可排序”？

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"); 

相关问题：

添加到Jquery-ui可排序列表

Answer 2

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

添加这个：

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

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