jQuery可拖动+可排序-如何在两个可滚动列表之间拖放

Question

我希望有两个列表，可用项目和已选项目，其中可用项目通过拖放分配给已选项目。我需要已选项目可以排序，但不需要可用项目排序。挑战在于两个列表都可能包含大量项目，因此需要滚动。

以下是我目前使用的jQuery代码：

        <script type="text/javascript">
        $(function() {
            $( "#available > li" ).draggable({ 
                revert: 'invalid',
                connectToSortable: '#selected',
                containment: '#drag_container'
            });

            $( "#selected" ).sortable({
                axis: 'y',
                placeholder: 'ui-state-highlight'
            });
        });
    </script>

对应的HTML代码如下：

            <div class="drag_container">
            <ul id="available" class="drag_column draggable">
                <li id="item1" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 1</li>
                <li id="item2" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 2</li>
                <li id="item3" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 3</li>
                <li id="item4" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 4</li>
                <li id="item5" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 5</li>
                <li id="item6" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 6</li>
                <li id="item9" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 9</li>
                <li id="item10" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 10</li>
            </ul>


            <ul id="selected" class="drag_column draggable sortable" style="margin-left: 20px;">
                <li id="item7" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 7</li>
                <li id="item8" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 8</li>
                <li id="item9" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 9</li>
                <li id="item10" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 10</li>
                <li id="item11" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 11</li>
                <li id="item12" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 12</li>
                <li id="item13" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 13</li>
                <li id="item14" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 14</li>
                <li id="item15" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 15</li>
                <li id="item16" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 16</li>
                <li id="item17" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 17</li>
                <li id="item18" class="ui-state-default"><span class="ui-icon ui-icon-arrow-4-diag"></span>Item 18</li>
            </ul>
            <div style="clear: both">&nbsp;</div>
        </div>

在需要滚动列表的情况下，我无法使拖动行为优雅地工作（请参见http://pastehtml.com/view/1bsk6bt.html中的演示）。

一旦被拖动的项目进入“可用项目”列表，它就会消失在可滚动框架的后面。我已经尝试过克隆助手，并且还尝试了调整包含div、不同的溢出选项、在jQuery中关闭滚动选项，但都不能使其正常工作。我相信有人已经完成了类似于我这里所要做的事情，并可以节省我的时间，能帮忙吗？:)

非常感谢任何帮助！

- mwalsher

Answer 1

哎呀！这个修复起来真有趣。

第一个问题，列表水平滚动不断，我通过对你的CSS进行一些简单的溢出更改来解决。我从.drag_column中删除了两个溢出属性，并在.drag_container中添加了一个overflow: hidden。

.drag_container {
    width: 1000px;
    margin: 0 auto;
    position: relative;
    border: 1px solid black;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.drag_column {
    padding: 5px;
    width: 490px;
    height: 200px;
    float: left;
    position: relative;
}

不幸的是，当我这样做时，当您将可拖动物从一个列表移动到另一个列表时，它会创建一个位置错误（根据您选择的列表项，它会向上飞）。为了解决这个问题，我在可拖动创建函数中添加了一行“helper：clone”。

$( "#available > li" ).draggable({ 
    revert: 'invalid',
    connectToSortable: '#selected',
    containment: '#drag_container',
    helper: 'clone'
});

再次产生了一个不良效果。克隆助手使得原始列表永远不会删除项目。为了解决这个问题，我不得不手动创建一个函数来删除旧项目。我的做法是在您的可拖动对象上添加了一个start：function，它获取了对象ID并将其放入变量中。然后，我创建了一个#selected列表的可投放对象，并在那里创建了一个drop：function。该drop function只需在具有匹配id的对象上执行slideUp（100）。请注意，在脚本启动时我进行了变量创建 - 这解决了IE中的一个错误。

var dragged = null;
$(function() {
    $( "#available > li" ).draggable({ 
        revert: 'invalid',
        connectToSortable: '#selected',
        containment: '#drag_container',
        helper: 'clone',
        start: function(ui, event) {
            dragged = $(this).attr('id');
        }
    });
    $( "#selected" ).droppable({
        drop: function(event, ui) {
            var ident = "#" +  dragged;
            $(ident).slideUp(100);
        }
    });

我在http://pastehtml.com/view/1by9nfd.html发布了一个完整的HTML页面，你可以自由地进行操作。希望这能帮到你！

- jwegner

---

那么为什么滚动条没有出现？如果您的项比视图更多，您将无法滚动以查看它们。 - PartySoft

Answer 2

我需要这个功能，并找到了一种实现的方法：使用appendTo: "body"并在开始时设置绝对位置。被拖动的元素被附加到body上，并且始终处于其他元素的“顶部”，因为它的位置是相对于body的绝对位置。

$( "#available > li" ).draggable({

    revert: 'invalid',
    appendTo: 'body',
    helper: 'clone',
    connectToSortable: '#selected',
    containment: '#drag_container',

start: function( event, ui ){

    $(ui.helper).css('position', 'absolute'); //helper if you are using clone

},


stop: function(event, ui){

    $(ui.helper).css('position', 'relative'); // if you want

} 

});

希望这能有所帮助。

- Mandeep Jain