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

Question

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

我有两个部分，一个是捕捉用户输入并在">to-DO"部分创建列表，另一个是">购买的"部分，用户可以通过拖动将购买的物品("从‘to-DO’部分")放到其中。

我在将元素从"待办事项"部分拖到"已购买"部分时遇到了问题我尝试使用"drop"事件处理程序来查找可接受的"dropable item"，并将其附加到Purchase部分。调试时，元素被附加到购买的列表中(正如我在chrome调试器中看到的那样)，并显示：none，但最终被添加到"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 Fiddle：http://jsfiddle.net/sivajs/hudqfrfz/7/

请指导我如何实现这个功能

Answer 1

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

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

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