jQuery Sortable - 拖放多个项目答案

【问题标题】：jQuery Sortable - drag and drop multiple itemsjQuery Sortable - 拖放多个项目
【发布时间】：2014-05-29 10:04:12
【问题描述】：

我有以下代码，它允许用户从一个列表拖放到另一个列表。现在，如何允许用户选择和拖放多个项目？

这样的？ http://jsfiddle.net/T68Fn/

我曾尝试将 jsfiddle 中的代码合并到其中，但无法真正使其正常工作。非常感谢任何帮助。

请帮帮我。非常感谢。

HTML

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

</head>
<body>
  <div id="maincontainer">
   <div id="navtoplistline">&nbsp;</div>
      <div id="contentwrapper">
        <div id="maincolumn">
           <div class="text">
            <hr />
            <div class="listBlock">
                    <h2>Available</h2>

                <ul id="sortable1" class='droptrue'>
                    <li class="ui-state-default" id="article_1">Article #1</li>
                    <li class="ui-state-default" id="article_2">Article #2</li>
                    <li class="ui-state-default" id="article_3">Article #3</li>
                </ul>
            </div>
            <div class="listBlock">
                    <h2>My Articles</h2>

                <ul id="sortable2" class='droptrue'></ul>
            </div>
            <br clear="both" />
            <p>Which articles, in which order?:
                <br />
                <input type="text" id="postOrder" name="postOrder" value="" size="30" />
            </p>
        </div>
    </div>
   </div>
  </div>
</body>
</html>

CSS

.listBlock {
  float: left;
}
#sortable1, #sortable2 {
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-right: 100px;
  background: #eee;
  padding: 5px;
  width: 300px;
  border: 1px solid black;
}
#sortable1 li, #sortable2 li {
  cursor: move;
  margin: 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 250px;
  background: none;
  background-color: white;
}

脚本

    $(function() {
        $("ul.droptrue").sortable({
            connectWith: 'ul',
            opacity: 0.6,
            update : updatePostOrder
        });

        $("#sortable1, #sortable2").disableSelection();
        $("#sortable1, #sortable2").css('minHeight',$("#sortable1").height()+"px");
        updatePostOrder();
    });

    function updatePostOrder() { 
        var arr = [];
      $("#sortable2 li").each(function(){
        arr.push($(this).attr('id'));
      });
      $('#postOrder').val(arr.join(','));
  }

【问题讨论】：

你会想看看 Handles.. 这是你应该在示例中关注的代码：start: function(e, ui) { ui.helper.addClass(selectedClass); }, search for Helper/handle jquery sortable

标签： jquery jquery-ui jquery-ui-sortable

【解决方案1】：

一种方法是使用所选项目创建自定义helper，在拖动时隐藏项目并手动将所选项目附加到receive。

这是我的尝试：

css

.selected {
  background:red !important;
}
.hidden {
  display:none;
}

脚本：

 $('.droptrue').on('click', 'li', function () {
    $(this).toggleClass('selected');
 });

 $("ul.droptrue").sortable({
    connectWith: 'ul.droptrue',
    opacity: 0.6,
    revert: true,
    helper: function (e, item) { //create custom helper
        if(!item.hasClass('selected'))
           item.addClass('selected');
        // clone selected items before hiding
        var elements = $('.selected').not('.ui-sortable-placeholder').clone();
        //hide selected items
        item.siblings('.selected').addClass('hidden');
        var helper = $('<ul/>');
        return helper.append(elements);
    },
    start: function (e, ui) {
        var elements = ui.item.siblings('.selected.hidden').not('.ui-sortable-placeholder');
        //store the selected items to item being dragged
        ui.item.data('items', elements);
    },
    receive: function (e, ui) {
        //manually add the selected items before the one actually being dragged
        ui.item.before(ui.item.data('items'));
    },
    stop: function (e, ui) {
        //show the selected items after the operation
        ui.item.siblings('.selected').removeClass('hidden');
        //unselect since the operation is complete
        $('.selected').removeClass('selected');
    },
    update: updatePostOrder
});

$(function () {
    $('.droptrue').on('click', 'li', function () {
        $(this).toggleClass('selected');
    });

    $("ul.droptrue").sortable({
        connectWith: 'ul.droptrue',
        opacity: 0.6,
        revert: true,
        helper: function (e, item) {
            console.log('parent-helper');
            console.log(item);
            if(!item.hasClass('selected'))
               item.addClass('selected');
            var elements = $('.selected').not('.ui-sortable-placeholder').clone();
            var helper = $('<ul/>');
            item.siblings('.selected').addClass('hidden');
            return helper.append(elements);
        },
        start: function (e, ui) {
            var elements = ui.item.siblings('.selected.hidden').not('.ui-sortable-placeholder');
            ui.item.data('items', elements);
        },
        receive: function (e, ui) {
            ui.item.before(ui.item.data('items'));
        },
        stop: function (e, ui) {
            ui.item.siblings('.selected').removeClass('hidden');
            $('.selected').removeClass('selected');
        },
        update: updatePostOrder
    });

    $("#sortable1, #sortable2").disableSelection();
    $("#sortable1, #sortable2").css('minHeight', $("#sortable1").height() + "px");
    updatePostOrder();
});

function updatePostOrder() {
    var arr = [];
    $("#sortable2 li").each(function () {
        arr.push($(this).attr('id'));
    });
    $('#postOrder').val(arr.join(','));
}

.listBlock {
    float: left;
}
#sortable1, #sortable2 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-right: 100px;
    background: #eee;
    padding: 5px;
    width: 300px;
    border: 1px solid black;
}
#sortable1 li, #sortable2 li {
    color:black;
    cursor: move;
    margin: 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 250px;
    background: none;
    background-color: white;
}
.selected {
    background:red !important;
}
.hidden {
    display:none !important;
}
ul {
    list-style-type: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="maincontainer">
    <div id="navtoplistline">&nbsp;</div>
    <div id="contentwrapper">
        <div id="maincolumn">
            <div class="text">
                <hr />
                <div class="listBlock">
                     <h2>Available</h2>

                    <ul id="sortable1" class='droptrue'>
                        <li id="article_1">Article #1</li>
                        <li id="article_2">Article #2</li>
                        <li id="article_3">Article #3</li>
                    </ul>
                </div>
                <div class="listBlock">
                     <h2>My Articles</h2>

                    <ul id="sortable2" class='droptrue'></ul>
                </div>
                <br clear="both" />
                <p>Which articles, in which order?:
                    <br />
                    <input type="text" id="postOrder" name="postOrder" value="" size="30" />
                </p>
            </div>
        </div>
    </div>
</div>

JSFiddle Demo

【讨论】：

好消息！确实有助于回答这个问题：stackoverflow.com/questions/38221956/…