Update DOM on item drag/drop w/jQuery
I have a table with two columns. Each column has a unique ID "pick" and "drop". Also i have a number of items in the first column. Using jQuery UI draggable/droppable I drag the items from the first column (pick) into the second one (drop).
    
    <table>
    <tr>
    	<td id="pick">
            <div id="item1"  class="box">Item 1</div>
            <div id="item52" class="box">Item 55</div>
            <div id="item33" class="box">Item 091</div>
        </td>
        <td id="drop">
        
        </td>
    </tr>
    </table>

 
I need to update the DOM when the item is moved, remove the item from "pick" and add it to "drop". I need help putting it all into a function. The function will be included into a part of code where I can detect drop.

Now, the item can be moved within "drop" area any number of times, so I only want to call this function **manipulateDom(itemID, label)** when it is moved from "pick" to "drop".

The items initially created using the following function:

    function createItem(itemID, label) {
    	// create the new item
      	var newItem = $("<div>")
      		.attr("id",itemID)
      		.addClass("box")
      		.text(label);	
     		
      	// make the new item draggable
    	newItem.draggable({
    		handle: ".box",
    	    stack: ".box",
    	    revert: "invalid",
    		start: function() {
             	$(this).css("cursor","move");	
        	},
    		stop: function() {
             	$(this).css("cursor","default");
        	}
    	});  		
    		
        return newItem;
    }

So, I need to combine it with my new one, and that's where I really need help:

    function manipulateDom(itemID, label) {
        ...remove();
        createItem(itemID, label);
    }


Update DOM on item drag/drop w/jQuery
===

I have a table with two columns. Each column has a unique ID "pick" and "drop". Also i have a number of items in the first column. Using jQuery UI draggable/droppable I drag the items from the first column (pick) into the second one (drop).
    
    <table>
    <tr>
    	<td id="pick">
            <div id="item1"  class="box">Item 1</div>
            <div id="item52" class="box">Item 55</div>
            <div id="item33" class="box">Item 091</div>
        </td>
        <td id="drop">
        
        </td>
    </tr>
    </table>

 
I need to update the DOM when the item is moved, remove the item from "pick" and add it to "drop". I need help putting it all into a function. The function will be included into a part of code where I can detect drop.

Now, the item can be moved within "drop" area any number of times, so I only want to call this function **manipulateDom(itemID, label)** when it is moved from "pick" to "drop".

The items initially created using the following function:

    function createItem(itemID, label) {
    	// create the new item
      	var newItem = $("<div>")
      		.attr("id",itemID)
      		.addClass("box")
      		.text(label);	
     		
      	// make the new item draggable
    	newItem.draggable({
    		handle: ".box",
    	    stack: ".box",
    	    revert: "invalid",
    		start: function() {
             	$(this).css("cursor","move");	
        	},
    		stop: function() {
             	$(this).css("cursor","default");
        	}
    	});  		
    		
        return newItem;
    }

So, I need to combine it with my new one, and that's where I really need help:

    function manipulateDom(itemID, label) {
        ...remove();
        createItem(itemID, label);
    }

