How to drag and drop elements between a droppable and sortable (in both ways)?

0
votes

Here is what i need : to be able to drag and drop elements between a sortable and several droppable jquery widgets.

What is already implemented and works : drag and dropping elements between droppables and inside the same droppable.

<ul class="sortable" style="background-color:#eeeeee;height:200px">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
</ul>

<ul class="droppable" style="background-color:#eeeeee;height:150px">
   <li class="draggable ui-state-default">Drag me down1</li>
   <li class="draggable ui-state-default">Drag me down2</li>

</ul>

<ul class="droppable" style="background-color:#eeeeee;height:150px">
   <li class="draggable ui-state-default">Drag me down3</li>
</ul>

See the complete jsfiddle example here.

Remarks :

Using three sortables with connectWith option is not possible here, because i want elements in droppables to be not sorted. Inside droppables, user should be able move elements freely, with no constraint (already implemented, see jsfiddle example).

jquery ui example with draggable and sortable is also not helpful because it show how to insert a copy of a element to a sortable list by drag and dropping it, not how to move a draggable element to a sorted list and the opposite: how to move a sorted list element to droppable (what i want).

Accepted answers are a precise description of a solution that works or a edited js fiddle.

1
javascriptjquerycssjquery-uiweb

1 Answers

0
votes

You need to add a draggable class to the elements inside the sortable to make them draggable to the droppable.

<ul class="sortable" style="background-color:#eeeeee;height:200px">
    <li class="draggable ui-state-default">Item 1</li>
    <li class="draggable ui-state-default">Item 2</li>
    <li class="draggable ui-state-default">Item 3</li>
</ul>

http://jsfiddle.net/uG62q/1/