使用jquery

Question

我基本上是为我的演示应用程序引用此链接http://jqueryui.com/droppable/#shopping-cart。我需要预先填充从ajax调用到draggable div的数据列表（响应），并在点击Update按钮时将droppable中丢弃的项目更新到DataBase。

在上图中，第1项至第7项是预先填充的。拖放项目6和项目7的位置，必须在更新按钮单击时更新为数据库。

我获取listItems（fruits名称）的ajax调用将是。

function papulateDraggableDiv(){
    $.ajax({
        type: 'GET',
        url: '<%=request.getContextPath()%>/fetchFruitdataList',
            cache: false,
            success: function(data) {                   
                var frt = jQuery.parseJSON(data);                
                 $.each(frt, function(i) {              
                var listItems +='<option value="'+frt[i].fruitId+'">'+frt[i].fruitName+'</option>'; //listitems should be binded.               
                });                                 
        },
        error: function(xhr, textStatus, error){
            alert("Error occured. Please try after some time.");
        } 
    });
}

我的问题是

1.如何将这些列表项绑定/显示为可拖动的div，因此每个项目都被分别拖放到droppable div。

2.如何在更新按钮单击时从已删除的div获取/获取drooped项及其itemID，以便可以使用表单（或ajax调用）在服务调用的数据库中更新

感谢任何形式的帮助。请帮忙。