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

jQuery UI sortable - drag element on click

本文关键字：拖动 元素 单击 UI 排序 jQuery      更新时间：2023-09-26

我有两个块，"可拖动"answers"可排序"。在"可拖动"中，我有一些项目可以拖动到"可排序"。

我想有可能点击"可拖动"中的项目，并自动将其拖动到"可排序"中。

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

有什么想法吗？我如何通过点击元素将其拖动到"可排序"？

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

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可排序列表

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

添加此：

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

另外，考虑将和id用于可排序列表，而不是类。

相关文章：