jQuery UI sortable - drag element on click

Question

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 ?

I think I'm not following. You want to be able to create new draggables attached to the sortable list from the static items you have around? — tfrascaroli
– tfrascaroli, Commented Sep 29, 2014 at 12:27
No, I want to mimic the the behavior of dragging the element into the sortableList by clicking on the element I want to drag. — agis
– agis, Commented Sep 29, 2014 at 12:30
Ok, so you have items outside the sortable list and you want to add those you want, keeping others out, right? — tfrascaroli
– tfrascaroli, Commented Sep 29, 2014 at 12:30
Yes, you can see how the dragging works on the jsbin example. So I want to the same thing when I click on the items I normally have to drag. — agis
– agis, Commented Sep 29, 2014 at 12:31

Community · Accepted Answer · 2017-05-23 12:21:22Z

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

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Sep 29, 2014 at 13:02

DanielST

14.2k7 gold badges45 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

agis Over a year ago

I've tried replacing append with clone but it doesn't work, any suggestions ?

DanielST Over a year ago

@agis I've edited. Clone doesn't copyTo, it just clones and returns the clone.

tfrascaroli · Accepted Answer · 2014-09-29 13:07:54Z

0

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.

answered Sep 29, 2014 at 13:07

tfrascaroli

1,2191 gold badge17 silver badges28 bronze badges

Collectives™ on Stack Overflow

jQuery UI sortable - drag element on click

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related