相关疑难解决方法(0)

我有一个设计,我有一个"可用的盒子"列表,用户通过将它们从"可用的盒子"列表拖到他们的"我的盒子"列表来获取盒子.

用户通常一次多取多个盒子(最多20个),一旦他们完成盒子,他们将它们拖回"可用盒子"列表以返回它们.

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

我可能必须完全提出一种不同的UI方法,但首先是否有人对如何实现这一点有任何建议？

谢谢!

我正在尝试在jQuery可排序集中选择多个项目,然后将所选项目一起移动.

这是我试图让它发挥作用的薄弱开端.这是代码:

HTML:

<div class="container">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
</div>

JS:

$('.container div').draggable({
    connectToSortable: '.container',
    //How do I drag all selected items?
    helper: function(e, ui) {
        return $('.selected');
    }
});

$('.container').sortable({
    axis: 'y',
    //How do I sort all selected items?
    helper: function(e, ui) {
        return $('.selected');
    }
});

$('.container div').live('click', function(e) {
    $(this).toggleClass('selected');
});

CSS:

body{background-color:#012;font-family:sans-serif;text-align:center;}
div{margin:5px 0;padding:1em;}
.container{width:52%;margin:1in auto;background-color:#555;border-radius:.5em;box-shadow:0 0 20px black;}
.container div{background-color:#333;color:#aaa;border:1px solid #777;background-color:#333;color:#aaa;border-radius:.25em;cursor:default;height:1em;}
.container div:hover{background-color:#383838;color:#ccc;}
.selected{background-color:#36a !important;border-color:#036 !important;color:#fff !important;font-weight:bolder;} …