jQuery Sortable - 选择并拖动多个列表项 [英] jQuery Sortable - Select and Drag Multiple List Items

问题描述

我有一个设计，其中有一个可用框"列表，用户通过将它们从可用框"列表拖到我的框"列表中来获取框.

用户通常一次拿走多个盒子(最多 20 个)，一旦他们用完盒子，他们就会将它们拖回可用盒子"列表以返回它们.

jQuery sortable 允许我一次拖动一个框，从用户的角度来看这是不可取的.我一直无法想出一个简单的解决方案来解决这个问题.

我可能不得不想出完全不同的 UI 方法，但首先有人对如何实现这一点有任何建议吗?

谢谢！

解决方案

我没有使用 sortable 进行这项工作，但我使用了draggable &可丢弃.我不知道我是否涵盖了您需要的所有功能，但这应该是一个好的开始(demo here):

HTML

<p>可用框(单击以选择多个框)</p><ul id="draggable"><li>框#1</li><li>框#2</li><li>框#3</li><li>方框#4</li><p>我的盒子</p><ul id="droppable">

脚本

$(document).ready(function(){var selectedClass = 'ui-state-highlight',clickDelay = 600,//点击时间(毫秒)上次点击，差异点击；//时间戳$("#draggable li")//将鼠标点击与拖动事件的点击区分的脚本.bind('mousedown mouseup', function(e){if (e.type=="mousedown") {lastClick = e.timeStamp;//获取鼠标按下时间} 别的 {diffClick = e.timeStamp - lastClick;如果 ( diffClick < clickDelay ) {//添加选定的类以对可拖动对象进行分组$(this).toggleClass(selectedClass);}}}).draggable({revertDuration: 10,//分组的项目分别动画，所以这个数字保持低包含:'.demo',开始:函数(e，ui){ui.helper.addClass(selectedClass);},停止:函数(e，ui){//重置组位置$('.' + selectedClass).css({ top:0, left:0 });},拖动:函数(e，ui){//将选定的组位置设置为主要拖动对象//这是有效的，因为位置是相对于起始位置的$('.' + selectedClass).css({顶部:ui.position.top，左:ui.position.left});}});$("#droppable, #draggable").sortable().droppable({下降:功能(e，ui){$('.' + selectedClass).appendTo($(this)).add(ui.draggable)//ui.draggable 是脚本附加的，所以在后面加上.removeClass(selectedClass).css({ 顶:0, 左:0 });}});});

I have a design where I have a list of "available boxes", users take boxes by dragging them from the "available boxes" list to their "My Boxes" list.

Users more often than not take multiple boxes at a time (max 20), once they have finished with the boxes they drag them back to the "available boxes" list to return them.

jQuery sortable allows me to drag one box at a time which from a user perspective is undesirable. I've been unable to come up with a simple solution to the issue.

I may have to come up with a different UI method entirely, but first does anyone have any suggestions on how this might be accomplished?

Thanks!

解决方案

I don't have this working using sortable, but I did using draggable & droppable. I don't know if I covered all the functionality you need, but it should be a good start (demo here):

HTML

<div class="demo">
    <p>Available Boxes (click to select multiple boxes)</p>    
    <ul id="draggable">
        <li>Box #1</li>
        <li>Box #2</li>
        <li>Box #3</li>
        <li>Box #4</li>
    </ul>

    <p>My Boxes</p>
    <ul id="droppable">
    </ul>

</div>

Script

$(document).ready(function(){

    var selectedClass = 'ui-state-highlight',
        clickDelay = 600,     // click time (milliseconds)
        lastClick, diffClick; // timestamps

    $("#draggable li")
        // Script to deferentiate a click from a mousedown for drag event
        .bind('mousedown mouseup', function(e){
            if (e.type=="mousedown") {
                lastClick = e.timeStamp; // get mousedown time
            } else {
                diffClick = e.timeStamp - lastClick;
                if ( diffClick < clickDelay ) {
                    // add selected class to group draggable objects
                    $(this).toggleClass(selectedClass);
                }
            }
        })
        .draggable({
            revertDuration: 10, // grouped items animate separately, so leave this number low
            containment: '.demo',
            start: function(e, ui) {
                ui.helper.addClass(selectedClass);
            },
            stop: function(e, ui) {
                // reset group positions
                $('.' + selectedClass).css({ top:0, left:0 });
            },
            drag: function(e, ui) {
                // set selected group position to main dragged object
                // this works because the position is relative to the starting position
                $('.' + selectedClass).css({
                    top : ui.position.top,
                    left: ui.position.left
                });
            }
        });

    $("#droppable, #draggable")
        .sortable()
        .droppable({
            drop: function(e, ui) {
                $('.' + selectedClass)
                 .appendTo($(this))
                 .add(ui.draggable) // ui.draggable is appended by the script, so add it after
                 .removeClass(selectedClass)
                 .css({ top:0, left:0 });
            }
        });

});

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