Question

I’m trying to mix a little those two samples (http://jqueryui.com/demos/sortable/connect-lists.html) and (http://jqueryui.com/demos/draggable/sortable.html). I’d like to get two lists, both sortable and I also would like to be able to copy (not move!) elements from list1 to list2, by dragging them from one list to another.

For example, we have two lists:

a   1
b   2
c   3

Sorting first list:

a   1
c   2
b   3

Dragging from first list to second:

a   1
c   2
b   3
    b

I’m not very good at JS, so I’ve spent couple of hours, but failed =(. I could make first list either sortable, or draggable, but not all together.

Any ideas would be appreciated 🙂

UPD
http://pastebin.com/daAT6ZVs

Answer 1

This link may help you

http://devheart.org/examples/jquery-customizable-layout-using-drag-and-drop/1-getting-started-with-sortable-lists/index.html#ex-1-2

Example 1.2: Sortable and connectable lists

Edited 

configure sort and drag propertly like this in given example

$( "#sortable" ).sortable({
    revert: true
});
$( "#draggable" ).draggable({
    connectToSortable: "#sortable",
    helper: "clone",
    revert: "invalid"
});