JQuery-UI - help needed with draggable and droppable interaction

Question

I am learning JQuery & JqueryUI by building a simple shopping list APP.

I have two sections , one is to capture the user input and create a list in the " TO-DO " section and the other is the " purchased " section where the user can drop the shopped items ("from the 'TO-DO' section") by dragging them.

I have a problem with dragging the elements from the "to-do" section and dropping the elements onto the "Purchased" section. I tried using the "drop" event handler to look for an acceptable "droppable item" and Append it to the Purchased section . while debugging the element gets appended to the purchased list (as I see it in the chrome debugger) with display:none but eventually gets added in the "TO-DO" section itself .please help me implement this functionality of dropping them in the purchased section and dragging and dropping the purchased section in the to-do section

here is the Code snippet related to the drop functionality

 $(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") });*/ }); } }); 

:

This is the js Fiddle : http://jsfiddle.net/sivajs/hudqfrfz/7/

please guide me how to implement this functionality

Answer 1

I created a demo for trying to use lists, then connect them through ui-sortable , using connected lists .

I may not solve the error with your code. However this way is much easy to drag and drop elements from both sections. I think it's deserved to take a look.

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