我正在尝试创建动态可丢弃容器，以便在它们之间移动排序列表。
我有一个排序列表，里面有订单，还有一个多选下拉列表（http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/)由后面的代码填充
每次选择一个项目时，我都想动态添加一个可丢弃的div，我可以通过将其从排序列表拖放到任何容器中来填充该div中的可排序列表，在容器之间或返回到排序列表。
我可以创建可丢弃的容器，但无法从排序列表中获取项目以将其放入其中。
下面是我的代码
<script type="text/javascript">
$(function () {
$("select").multiselect({
click: function (event, ui) {
if (ui.checked) {
addGroup(ui.value)
}
}
});
});
</script>
<script type="text/javascript">
function addGroup(container) {
var x = $("<div class='dropcontainer' id='" + container + "'><p>GROUP #</p><ul class='sortable-list'></ul></div>");
$("div#groups").append(x);
x.droppable({
activeClass: 'dragactive',
hoverClass: 'drophover',
drop: function (event, ui) {
}
});
}
</script>
<script type="text/javascript">
$('#groups .sortable-list').sortable({
connectWith: '#groups .sortable-list'
})
</script>
<script>
$(function () {
$("#sortable").sortable(({
connectWith: '#groups .sortable-list'
})
</script>
<div class="bootstrap-frm">
<div>
<select id="ddlGroups" size="5" runat="server"></select>
</div>
<ul id="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
<div id="groups">
</div>
</div>
编辑：
我修改了我的代码，以便在从下拉菜单中选择时创建一个新的动态可排序连接列表。，但我无法将任何内容拖到新创建的列表中。
http://jsfiddle.net/pwnxkme4/30/
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function () {
$("#sortable1, .sortable-list").sortable({
connectWith: "#sortable2 .sortable-list"
});
});
</script>
<style>
.left {
float: left;
}
.right {
float: right;
}
#center-wrapper {
margin: 0 auto;
width: 920px;
}
.column {
margin-left: 2%;
width: 400px;
}
.column.first {
margin-left: 0;
}
.sortable-list {
background-color: #F93;
list-style: none;
margin: 0;
min-height: 60px;
padding: 10px;
}
.sortable-item {
background-color: #FFF;
border: 1px solid #000;
cursor: move;
display: block;
font-weight: bold;
margin-bottom: 5px;
padding: 20px 0;
text-align: center;
}
#containment {
background-color: #FFA;
height: 230px;
}
.placeholder {
background-color: #BFB;
border: 1px dashed #666;
height: 58px;
margin-bottom: 5px;
}
#topBar {
margin: 40px;
height: 50px;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document.body).on('change', '#multi', function () {
addSortableDiv($(this).val());
});
function addSortableDiv(item) {
var x = $('<div class="column left" id="' + item + '"><ul class="sortable-list"><li class="sortable-item"></li></ul></div>');
$("div#sortable2").append(x);
x.droppable({
drop: function (event, ui) {
}
});
};
</script>
<div id="dragDropContainer">
<div id="topBar">
<select id="multi">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
<option value="option6">Option 6</option>
<option value="option7">Option 7</option>
<option value="option8">Option 8</option>
<option value="option9">Option 9</option>
<option value="option10">Option 10</option>
</select>
</div>
<div id="sortable1" style="width:400px;">
<div class="column left first">
<ul class="sortable-list">
<li class="sortable-item">Order A</li>
<li class="sortable-item">Order B</li>
<li class="sortable-item">Order C</li>
<li class="sortable-item">Order D</li>
<li class="sortable-item">Order E</li>
</ul>
</div>
</div>
<div id="sortable2">
</div>
</div>
</body>
我认为您将能够根据自己的需求进行调整，我对此进行了研究，因为这不是我以前使用过的东西，这让我感兴趣，这就是我想到的。
$(function(){
$(".dragMe").draggable(
{
revert : function(event, ui) {
$(this).data("uiDraggable").originalPosition = {
top : 0,
left : 0
};
return (event !== false) ? false : true;
}
});
$("#left, #right").droppable(
{
drop: function(ev, ui) {
var dropped = ui.draggable;
var droppedOn = $(this);
$(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
}
});
$("#multi").on("change", function(){
var item = $(this).val();
$("#right").append("<p>" + item + "</p>");
});
});
它具有我认为你追求的功能。
这是一个JSFIDDLE希望这能帮助