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 'dra

Solution 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

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