jQuery Sortable-拖放多个项目

本文介绍了jQuery Sortable-拖放多个项目的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有以下代码，该代码允许用户从一个列表拖放到另一个列表.现在，我如何允许用户选择并拖动&放多个物品?

I have the following code, which allows user to drag and drop from one list to another. Now, how can I allow the user to select and drag & drop multiple items?

是这样吗? http://jsfiddle.net/T68Fn/

我尝试将jsfiddle中的代码并入其中，但实际上无法使其正常工作.任何帮助都将受到高度赞赏.

I have tried to incorporate the code from the jsfiddle in, but can't really get it to work. Any help is highly appreciated.

请帮帮我.非常感谢.

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(','));
  }

推荐答案

一种方法是创建自定义具有所选项目的帮助程序，在拖动时隐藏项目，然后将所选项目手动附加到接收.

One way is to create a custom helper with the selected items, hide the items while dragging and manually append the selected items upon 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演示

这篇关于jQuery Sortable-拖放多个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！