Question

我想结合两个列表进行排序，哪个像单个列表一样工作。我的代码是。

$(function () {
 $("#sortable").sortable({
     connectWith: "#sortable1"
 });

 $("#sortable1").sortable({
     connectWith: "#sortable"
 });

 $("#sortable,#sortable1").disableSelection();
});

我的HTML是。

    <ul id="sortable">
    <li class="ui-state-default">1</li>
    <li class="ui-state-default">2</li>
    <li class="<ui-s></ui-s>tate-default">3</li>
    <li class="ui-state-default">4</li>
    <li class="ui-state-default">5</li>
    <li class="ui-state-default">6</li>
    <li class="ui-state-default">7</li>
    <li class="ui-state-default">8</li>
    <li class="ui-state-default">9</li>
    <li class="ui-state-default">10</li>
    <li class="ui-state-default">11</li>
    <li class="ui-state-default">12</li>
</ul>
<ul id="sortable1">
    <li class="ui-state-default">1</li>
    <li class="ui-state-default">2</li>
    <li class="ui-state-default">3</li>
    <li class="ui-state-default">4</li>
    <li class="ui-state-default">5</li>
    <li class="ui-state-default">6</li>
    <li class="ui-state-default">7</li>
    <li class="ui-state-default">8</li>
    <li class="ui-state-default">9</li>
    <li class="ui-state-default">10</li>
    <li class="ui-state-default">11</li>
    <li class="ui-state-default">12</li>
</ul>

当我删除

</ul>
<ul id="sortable1">

从这个HTML它的工作我想要的但我想要两个不同的列表相同的结果。为了清楚理解，请查看http://jsfiddle.net/67hEW/4/

由于

Answer 1

可排序的connectWith不适用于float。所以删除“float：left”并添加“display：inline-block”：

#sortable li, #sortable1 li {
    margin: 3px 3px 3px 0;
    padding: 1px;
    display:inline-block;
    width: 100px;
    height: 90px;
    font-size: 4em;
    text-align: center;
}

Answer 2

我已经改变了js来做我想要的东西，并且它的工作正常，浮动左边。 Js是

      (function($){
    $.fn.moveTo = function(selector){
        return this.each(function(){
            var cl = $(this).clone();
            $(cl).appendTo(selector);
            $(this).remove();
        });
    };
    $.fn.moveDown = function(selector){
        return this.each(function(){
            var cl = $(this).clone();
            $(cl).prependTo(selector);
            $(this).remove();
        });
    };
})(jQuery);


  $(function() {
       var oldList, newList, item;
    $( "#sortable" ).sortable({
        connectWith: "#sortable1",
        start: function(event, ui) {
            item = ui.item;
            newList = oldList = ui.item.parent();
        },
        stop: function(event, ui) {          
            alert("Moved " + item.text() + " from " + oldList.attr('id') + " to " + newList.attr('id'));
            if(oldList.attr('id') ==  newList.attr('id'))
            return;
                $('#'+newList.attr('id')+' li:first-child').moveTo('#'+oldList.attr('id'));

        },
        change: function(event, ui) {  
            if(ui.sender) newList = ui.placeholder.parent();


        },

    });

    $( "#sortable1" ).sortable({
        connectWith: "#sortable",
        start: function(event, ui) {
            item = ui.item;
            newList = oldList = ui.item.parent();
        },
        stop: function(event, ui) {          
            alert("Moved " + item.text() + " from " + oldList.attr('id') + " to " + newList.attr('id'));
            if(oldList.attr('id') ==  newList.attr('id'))
            return;
                $('#'+newList.attr('id')+' li:last-child').moveDown('#'+oldList.attr('id'));

        },
        change: function(event, ui) {  
            if(ui.sender) newList = ui.placeholder.parent();


        },

    });

    $( "#sortable,#sortable1" ).disableSelection();
  });

工作示例位于http://jsfiddle.net/67hEW/8/

jQuery Sortable用于组合两个不同的列表

2 个答案: