Jquery ui jQueryUI:Move sortable'；将元素分为可拖放和返回（或mootools替代）

我有一个包含瓷砖的可排序表。另外，我还有一堆可放下的。我想要以下互动：

用户可以将磁贴从可排序表拖到可拖放的位置。理想情况下，这会将磁贴移出可排序表，并将其附加到可下拉列表中。此外，droppable不应再接受任何内容，即一个droppable上最多只能有一个磁贴。我在这把小提琴上试过，但没能使“移动”起作用

一旦成功，用户还应该能够将磁贴从可下拉列表移回可排序列表，我在这里尝试了：（由于2个链接的限制，删除了链接，是同一小提琴的版本3。）但也失败了。（我只是尝试使用警报，因为我认为“从..移动到..”部分应该是相同的。）请参阅更新1

我试了几天，就是想不出来

PS：我在这里已经读了很多类似的问题，但是没有一个与我的问题完全相同，也就是说，将元素从可排序移动到可拖放

编辑：我也欢迎使用Mootools的替代解决方案

更新1:可拖放->可排序方向只起不到作用，因为我在可排序表中的分片具有

float:left

属性，这有效地使可排序表本身的大小为0px，因此无法悬停。固定小提琴：

---

更新2:虽然我找到了解决方法（请参见我的答案），但我仍然希望有一个移动元素的解决方案。我无法让任何

appendTo

或

append

工作。

因此，我找到了如何模拟它的方法。我对这个解决方案不是100%满意，因为它不会真正移动元素，所以我会接受任何更好的解决方案

而是创建一个新元素，删除旧元素并隐藏辅助对象。clone和appendTo似乎都不起作用

这是小提琴：

以及密码，以防小提琴丢失

html:

在这里放一个
还是这里一个
项目1
项目2
项目3

css:

.slot{
背景色：森林绿；
宽度：100px；
高度：100px；
边框：1px纯黑；
}
.可排序{
显示：表格行；
背景：#44F；
}
.瓷砖{
显示：表格单元格；
背景：耐火砖；
边框：1px纯黑；
宽度：50px；
高度：25px；
}

最后是javascript：

$（“.slot”）.可拖放({
下拉：功能（ev、ui）{
//只需要一个瓷砖每滴！
if（$（this）.children（）.length==0）{
//创建新的元素，该元素将位于可拖放文件中。
cl=$（''）.addClass（'tile'）.text（ui.draggable.text（））.css({
背景：“矢车菊蓝”
});
//将其拖回可排序表。
拖拉式({
connectToSortable:“.sortable”，
helper:'clone'/因此，我发现了如何模拟它。我对这个解决方案不是100%满意，因为它不会真正移动元素，所以我会接受任何更好的解决方案

相反，我创建了一个新元素，删除了旧元素并隐藏了助手。克隆和appendTo似乎都不起作用

这是小提琴：

以及密码，以防小提琴丢失

html:

在这里放一个
还是这里一个
项目1
项目2
项目3

css:

.slot{
背景色：森林绿；
宽度：100px；
高度：100px；
边框：1px纯黑；
}
.可排序{
显示：表格行；
背景：#44F；
}
.瓷砖{
显示：表格单元格；
背景：耐火砖；
边框：1px纯黑；
宽度：50px；
高度：25px；
}

最后是javascript：

$（“.slot”）.可拖放({
下拉：功能（ev、ui）{
//只需要一个瓷砖每滴！
if（$（this）.children（）.length==0）{
//创建新的元素，该元素将位于可拖放文件中。
cl=$（''）.addClass（'tile'）.text（ui.draggable.text（））.css({
背景：“矢车菊蓝”
});
//将其拖回可排序表。
拖拉式({
connectToSortable:“.sortable”，
助手：“克隆”//