JQuery-UI-可拖动和可拖放交互所需的帮助

Question

我正在通过构建一个简单的购物清单APP学习JQuery和JqueryUI。

我有两个部分，一个是捕获用户输入并在“ TO-DO ”部分中创建一个列表，另一个是“ purchad ”部分，用户可以在其中删除购物物品（“ TO-DO”中的部分”）。

将元素从“待办事项”部分拖放到“已购买”部分时，我遇到了问题。 我尝试使用“放置”事件处理程序查找可接受的“可放置项目”并将其附加到“购买的”部分 。 调试时，该元素会通过display：none附加到购买的列表中（如我在chrome调试器中看到的那样），但最终会在“ TO-DO”部分本身中添加。请帮助我实现此功能，将其删除部分，并将已购买的部分拖放到待办事项中

这是与放置功能相关的代码片段

 $(function(){ var $donediv = $(".donediv"); var $todo = $('#todolist'); var $donelist = $('#donelist'); var $todoItem = $( ".todoitem" ); var $purchaseditem = $(".purchaseditem"); $todo.sortable({ revert:true }); $todoItem.draggable({ connectToSortable: "#todolist", containment: parent, cursor: 'move', revert: true, }); $purchaseditem.draggable({ containment:parent, cursor: 'move' }); $donelist.droppable({ accept: '#todolist > li', activeClass: "ui-state-highlight", drop: function(event, ui){ alert(ui.draggable); dropItem(ui.draggable); } }); function dropItem($item){ //console.log($item); $item.fadeOut(function(){ //console.log($("li", "#donelist")); $item.removeClass('todoitem').addClass('purchaseditem'); $list = $("#donelist"); $list.append($item); alert("dropped"); $item..appendTo($list); /*$item.appendTo($list).fadeIn(function(){ $item.css("background-color", "#FF5555") });*/ }); } }); 

：

这是js小提琴： http : //jsfiddle.net/sivajs/hudqfrfz/7/

请指导我如何实现此功能

Answer 1

我创建了一个尝试使用列表的演示，然后使用已连接列表通过ui-sortable将它们连接起来 。

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

http://jsfiddle.net/gui47/hudqfrfz/10/