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

【问题标题】：jQuery UI sortable - drag element on clickjQuery UI 可排序 - 单击时拖动元素
【发布时间】：2014-09-29 12:20:51
【问题描述】：

我有两个块，“可拖动”和“可排序”。在“可拖动”中，我有一些可以将它们拖动到“可排序”的项目。

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

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

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

【问题讨论】：

我想我没有关注。您希望能够创建新的draggables 附加到您周围的静态项目中的sortable 列表？
不，我想通过单击要拖动的元素来模仿将元素拖动到 sortableList 中的行为。
好的，所以你有在可排序列表之外的项目，你想添加你想要的，而不让其他人排除，对吧？
是的，您可以在 jsbin 示例中看到拖动是如何工作的。所以当我点击我通常必须拖动的项目时，我想要同样的事情。

标签： javascript jquery jquery-ui jquery-ui-sortable

【解决方案1】：

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

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

【讨论】：

我试过用 clone 替换 append 但它不起作用，有什么建议吗？
@agis 我已编辑。克隆不复制到，它只是克隆并返回克隆。

【解决方案2】：

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

添加这个：

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

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

【讨论】：