一种容器是可排序，可投放和拖动(A container that is sortable, drop

这个问题涉及到jQuery的UI。

任何人能提供一个例子，执行以下操作：

容器进行排序，并且可弃
任何元素都可以拖入容器A，然后进行排序。
任何元素都可以拖出容器，然后简直成了页面各处拖动。
容器也是页面各处拖动

这是我到目前为止有：

$(function() {
    $("#sortable").sortable().droppable();
    $("#sortable").disableSelection();
    $("#drop").droppable({
        accept: "#sortable li",
        drop: function (evt, ui) {
            var $destination = $(this); 
            ui.draggable.appendTo( $destination ); 

        }
    }).draggable();
});

我创建了一个小提琴这里： http://jsfiddle.net/eEJHb/1/

说我遇到了问题：A）我不能在容器中得到排序落入容器B）有一次，我需要的元素为可拖动回排序列表

谢谢你的帮助！

更新**我的问题的部分中选择“connectWith”撒了谎。它根本不工作。相反，我使用选项“connectToSortable”（如可拖动的选项），我能得到的排序和拖动一起工作。

Answer 1:

我有同样的问题，直到我发现这个

  $(function () { $("#timetable .items").sortable({ connectWith: "ul" }); $("ul[id^='available']").draggable({ helper: "clone", connectToSortable: ".items" }); });

 <style type="text/css"> .bar { width: 100px; height: 20px; margin: 2px; border: 1px solid black; background-color: lightgreen; text-align: center; float: left; margin: 2px; padding: 2px; cursor: pointer; border-radius: 3px; } .list { background-color: lightblue; border: 1px solid gray; } .items .ui-selected { background: red; color: white; font-weight: bold; } .items { list-style-type: none; margin: 0; padding: 0; width: 100px; } .items li { margin: 2px; padding: 2px; cursor: pointer; border-radius: 3px; } .weekday { float: left; } .availablelist { background-color: orange; display: inline; } </style>

 <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <script type="text/javascript" src="http://www.pureexample.com/js/lib/jquery.ui.touch-punch.min.js"></script> <div style="float:left;width:500px;"> <div>Available employee</div> <ul id="available1" class="items"> <li class="list availablelist">Jhonny</li> </ul> <ul id="available2" class="items"> <li class="list availablelist">Tim</li> </ul> <ul id="available3" class="items"> <li class="list availablelist">George</li> </ul> <ul id="available4" class="items"> <li class="list availablelist">Melissa</li> </ul> <ul id="available5" class="items"> <li class="list availablelist">Alice</li> </ul> </div> <div style="clear:both"></div> <div id="timetable" style="float:left;width:700px;"> <div style="text-align:center">Time table</div> <div class="weekday">Monday <ul class="items"> <li class="list">Jhonny</li> <li class="list">Tim</li> <li class="list">George</li> <li class="list">Melissa</li> <li class="list">Alice</li> </ul> </div> <div class="weekday">Tuesday <ul class="items"> <li class="list">Jhonny</li> <li class="list">Tim</li> <li class="list">George</li> <li class="list">Melissa</li> <li class="list">Alice</li> </ul> </div> <div class="weekday">Wednesday <ul class="items"> <li class="list">Jhonny</li> <li class="list">Tim</li> <li class="list">George</li> <li class="list">Melissa</li> <li class="list">Alice</li> </ul> </div> <div class="weekday">Thursday <ul class="items"> <li class="list">Jhonny</li> <li class="list">Tim</li> <li class="list">George</li> <li class="list">Melissa</li> <li class="list">Alice</li> </ul> </div> <div class="weekday">Friday <ul class="items"> <li class="list">Jhonny</li> <li class="list">Tim</li> <li class="list">George</li> <li class="list">Melissa</li> <li class="list">Alice</li> </ul> </div> <div class="weekday">Saturday <ul class="items"> <li class="list">Jhonny</li> <li class="list">Tim</li> <li class="list">George</li> <li class="list">Melissa</li> <li class="list">Alice</li> </ul> </div> <div class="weekday">Sunday <ul class="items"> <li class="list">Jhonny</li> <li class="list">Tim</li> <li class="list">George</li> <li class="list">Melissa</li> <li class="list">Alice</li> </ul> </div> </div>

Answer 2:

我建议你看看这个文档：

http://jqueryui.com/sortable/#connect-lists

http://jqueryui.com/draggable/#sortable

而这些问题的答案：

获取jQuery的排序，可弃和可拖动的共同努力

jQuery的UI可拖动和可排序

Answer 3:

您可以使用jQuery的从-UI的相互作用。它提供dragable和排序的相互作用。

下面举例说明。