Geek asks and answers

Enabling sortable lists that prevent sorting by the first jQuery list

I don’t know if this is possible, but I want to do a few things,

I have 2 sortable lists that are related. I do not want to sort the first list, but I need elements that can be dragged into the second list.

Here is my code

$(document).ready(function() {
        $( "#webappsearchresults12267, #portfolio-ul" ).sortable({
            helper: 'clone',
            connectWith: ".connect",
            scroll: false,
            tolerance: 'intersect',
        stop: function(){
            var order = $("#portfolio-ul").sortable('toArray');
            $("#CAT_Custom_196863").val(order);
        }

        })
    });

<ul id="#webappsearchresults12267>
<li>item-1</li>
<li>item-2</li>
<li>item-3</li>
</ul>
<ul id="#portfolio-ul">
<li>item-4</li>
<li>item-5</li>
<li>item-6</li>
</ul>

I also have the option of cloning an item that I take from the first list ... "helper:" clone "," doesn't seem to work for me,

Any ideas? Perhaps I am not considering a sortable solution to the list, but I am dragging it .. with a sort list for the second list.

Any ideas?

+3
source share
1 answer

, '#' HTML, LI, 'toArray'. :

HTML:

<ul id="list1">
    <li id="ul_item_1">item-1</li>
    <li id="ul_item_2">item-2</li>
    <li id="ul_item_3">item-3</li>
</ul>
<br>
<br>
<ul id="list2">
    <li id="ul_item_4">item-4</li>
    <li id="ul_item_5">item-5</li>
    <li id="ul_item_6">item-6</li>
</ul>

JS

$( "#list1" ).sortable({
    helper: 'clone',
    connectWith: "#list2",
    scroll: false,
    tolerance: 'intersect',
stop: function(){
    var order = $("#list2").sortable('toArray');
    alert( order );
}

}).disableSelection();

$( "#list2" ).sortable().disableSelection();

http://jsfiddle.net/CoolEsh/4XAXR/3/

+2

More articles:


All Articles