How to JQuery UI Sortable Bettween two list but in one way

Question

I have two lists of items sortable, and connectWith each other. One list is all Item in DB call AllGroup The other is list of items i must add for something, call InGroup I want to can drag items from AllGroup and drop in InGroup and clone it, but can't drag items from InGroup to AllGroup. My Code:

Html:

<div class="allgroup">
<ul id="sortable1" class="connectedSortable sort-group">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</div>
<div class="ingroup">
<ul id="sortable2" class="connectedSortable sort-group">
<li class="ui-state-highlight">Item 1</li>
<li class="ui-state-highlight">Item 2</li>
<li class="ui-state-highlight">Item 3</li>
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Item 5</li>
</ul>

JS:

$( ".sort-group" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
$('#sortable1').sortable({ 
    helper: 'clone'
});
$('#sortable1').disableSelection();

How can do it? I try some code but not success.

ADM-IT ADM-IT · Accepted Answer · 2017-02-04T17:08:42

$('.sort-group').sortable({
    connectWith: "#sortable2",
    tolerance: 'pointer',
});

$('#sortable1').bind('sortstop', function(event, ui) {
    var elm = $(ui.item[0]);
    var parent = elm.parent();
    if (!parent.is("#sortable1")) {
        var idx = parent.children().index(elm)-1,
            elm = elm.clone(true);
        parent.children(':eq('+idx+')').after(elm);
    }
    $(this).sortable('cancel');
});

You can have a look how it works: http://jsfiddle.net/tZSN7/238/

How to JQuery UI Sortable Bettween two list but in one way

1 Answers