Javascript jQueryUI-可拖放交互需要帮助

我正在通过构建一个简单的购物清单应用程序来学习JQuery和JqueryUI

我有两个部分，一个是捕获用户输入并在“待办事项”部分创建列表，另一个是“购买的”部分，用户可以通过拖动来删除购物项目（“从“待办事项”部分”）

我在将元素从“to-do”部分拖到“Purchased”部分时遇到问题。我尝试使用“drop”事件处理程序查找可接受的“dropable item”并将其附加到Purchased部分。调试时，元素会被添加到购买的列表中（正如我在chrome调试器中看到的那样），并显示为display:none，但最终会添加到“to-DO”部分。请帮助我实现此功能 将它们拖放到已购买部分，并在待办部分拖放已购买部分

下面是与drop功能相关的代码片段

$（函数（）{
变量$donediv=$（“.donediv”）；
变量$todo=$（“#todolist”）；
变量$donelist=$（“#donelist”）；
变量$todoItem=$（“.todoItem”）；
var$purchaseditem=$（“.purchaseditem”）；
$todo.sortable({
回复：真
});
$todoItem.draggable({
connectToSortable:“#todolist”，
遏制：家长，
光标：“移动”，
回复：对，
});
$purchaseditem.draggable({
遏制：家长，
光标：“移动”
});
$donelist.Dropable({
接受：“#todolist>li”，
activeClass：“ui状态突出显示”，
drop：函数（事件、用户界面）{
警报（ui.draggable）；
dropItem（ui.Dragable）；
} 
});
函数dropItem（$item）{
//控制台日志（$项）；
$item.fadeOut（函数（）{
//console.log（$（'li'，'donelist'）；
$item.removeClass（'todoitem'）.addClass（'purchaseditem'）；
$list=$（“#donelist”）；
$list.append（$item）；
警惕（“放弃”）；
$item..appendTo（$list）；
/*$item.appendTo（$list）.fadeIn（函数（）{
$item.css（“背景色”，“#FF5555”）
});*/
});
}
});我创建了一个尝试使用列表的演示，然后通过
ui-sortable
使用将它们连接起来

我可能无法用你的代码解决这个错误。但是，这种方式很容易从两个部分拖放元素。我认为值得一看

非常感谢。它工作得很好，正如我所想……这真的很有帮助！：）@希瓦伊很高兴这有帮助。如果它对您有效，请将其标记为解决方案。