jQuery UI可排序-单击时拖动元素 [英] jQuery UI sortable - drag element on click

问题描述

我有两个块，可拖动"和可排序".在可拖动"内部，我只有几个项目可以将其拖动到可排序".

I have two blocks, "draggable" and "sortable". Inside "draggable" I have few items which I can drag them to "sortable".

我希望可以单击可拖动"中的一个项目，然后将其自动拖动到可排序"中.

I want to have the possibility to click an item inside "draggable" and automatically drag it into "sortable".

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

任何想法如何通过单击将元素拖到可排序"?

Any ideas how can I drag the elements to "sortable" by clicking on them ?

推荐答案

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

Add a click handler, tell it to append the target to the sortable. Then refresh the select.

http://jsbin.com/fukutomometu/5/

 $("#sidebar-wrapper").on("click", ".draggable", function(e){
     $(".sortableList").append(e.target).sortable('refresh');
 });

如果您不希望再拖动目标，也可以从目标中添加和删除相关的类.

You can also add and remove relevant classes from target if you don't want it to be draggable anymore.

和$.clone而不是$.append.并稍微更改顺序:

And $.clone instead of $.append if you don't want to move the original. And change the order a bit:

$(e.target).clone().appendTo(".sortableList");

相关问题:

添加到Jquery-ui可排序列表

这篇关于jQuery UI可排序-单击时拖动元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！