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".

Here is my 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');
 }
});

and this is a jsbin

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

回答1:

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.

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

Relevant question:

Add to Jquery-ui sortable list

回答2:

Your problem is not with the coding, it's with the lack of some css.

Add this:

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

Also, consider using and id for the sortable list, not a class.

来源：https://stackoverflow.com/questions/26099807/jquery-ui-sortable-drag-element-on-click