jQuery Sortable - 拖放多个项目 [英] jQuery Sortable - drag and drop multiple items

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

问题描述

我有以下代码，它允许用户从一个列表拖放到另一个列表.现在，我怎样才能允许用户选择和拖动 &掉落多个物品?

有这样的吗?http://jsfiddle.net/T68Fn/

我尝试将 jsfiddle 中的代码合并到其中，但无法真正让它工作.任何帮助表示高度赞赏.

请帮帮我.非常感谢.

HTML

<头><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"></脚本><身体><div id="主容器"><div id="navtoplistline">&nbsp;</div><div id="contentwrapper"><div id="maincolumn"><div class="text"><小时/><div class="listBlock"><h2>可用</h2><ul id="sortable1" class='droptrue'><li class="ui-state-default" id="article_1">文章#1</li><li class="ui-state-default" id="article_2">文章#2</li><li class="ui-state-default" id="article_3">文章#3</li>

<div class="listBlock"><h2>我的文章</h2><ul id="sortable2" class='droptrue'></ul>

<br clear="两者"/><p>哪些文章，按什么顺序?:<br/><input type="text" id="postOrder" name="postOrder" value="" size="30"/></p>

CSS

.listBlock {向左飘浮;}#sortable1, #sortable2 {列表样式类型:无；边距:0；填充:0；右边距:100px；背景:#eee;填充:5px；宽度:300px；边框:1px纯黑色；}#sortable1 里，#sortable2 里 {光标:移动；边距:5px；填充:5px；字体大小:1.2em；宽度:250px；背景:无；背景颜色:白色；}

脚本

 $(function() {$("ul.droptrue").sortable({连接:'ul'，不透明度:0.6，更新:updatePostOrder});$("#sortable1, #sortable2").disableSelection();$("#sortable1, #sortable2").css('minHeight',$("#sortable1").height()+"px");updatePostOrder();});函数 updatePostOrder() {var arr = [];$("#sortable2 li").each(function(){arr.push($(this).attr('id'));});$('#postOrder').val(arr.join(','));}

解决方案

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

这是我的尝试:

css

.selected {背景:红色！重要；}.隐藏{显示:无；}

脚本:

 $('.droptrue').on('click', 'li', function () {$(this).toggleClass('selected');});$("ul.droptrue").sortable({连接:'ul.droptrue'，不透明度:0.6，回复:真实，helper: function (e, item) {//创建自定义助手if(!item.hasClass('selected'))item.addClass('选择');//在隐藏之前克隆选定的项目var elements = $('.selected').not('.ui-sortable-placeholder').clone();//隐藏选中的项目item.siblings('.selected').addClass('hidden');var helper = $('

$(function () {$('.droptrue').on('click', 'li', function () {$(this).toggleClass('selected');});$("ul.droptrue").sortable({连接:'ul.droptrue'，不透明度:0.6，回复:真实，助手:功能(e，项目){console.log('家长助手');控制台日志(项目)；if(!item.hasClass('selected'))item.addClass('选择');var elements = $('.selected').not('.ui-sortable-placeholder').clone();var helper = $('
    ');item.siblings('.selected').addClass('hidden');返回 helper.append(elements);},开始:函数(e，ui){var elements = ui.item.siblings('.selected.hidden').not('.ui-sortable-placeholder');ui.item.data('items', 元素);},接收:函数(e，ui){ui.item.before(ui.item.data('items'));},停止:函数(e，ui){ui.item.siblings('.selected').removeClass('hidden');$('.selected').removeClass('selected');},更新:updatePostOrder});$("#sortable1, #sortable2").disableSelection();$("#sortable1, #sortable2").css('minHeight', $("#sortable1").height() + "px");updatePostOrder();});函数 updatePostOrder() {var arr = [];$("#sortable2 li").each(function () {arr.push($(this).attr('id'));});$('#postOrder').val(arr.join(','));}

.listBlock {向左飘浮;}#sortable1, #sortable2 {列表样式类型:无；边距:0；填充:0；右边距:100px；背景:#eee;填充:5px；宽度:300px；边框:1px纯黑色；}#sortable1 里，#sortable2 里 {颜色:黑色;光标:移动；边距:5px；填充:5px；字体大小:1.2em；宽度:250px；背景:无；背景颜色:白色；}.selected {背景:红色！重要；}.隐藏{显示:无！重要；}ul{列表样式类型:无；}

<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="主容器"><div id="navtoplistline">&nbsp;</div><div id="contentwrapper"><div id="maincolumn"><div class="text"><小时/><div class="listBlock"><h2>可用</h2><ul id="sortable1" class='droptrue'><li id="article_1">文章#1</li><li id="article_2">文章#2</li><li id="article_3">文章#3</li>

<div class="listBlock"><h2>我的文章</h2><ul id="sortable2" class='droptrue'></ul>

<br clear="两者"/><p>哪些文章，按什么顺序?:<br/><input type="text" id="postOrder" name="postOrder" value="" size="30"/></p>

JSFiddle 演示

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?

Something like this? http://jsfiddle.net/T68Fn/

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

Please help me out. Thank you very much.

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;
}

SCRIPT

    $(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.

Here's my attempt:

css

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

script:

 $('.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

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

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆