如何使用可拖动和可选择的JQuery拖动一个或多个项目到一个元素

我想知道如何将一个或多个项目(在我的情况下，通过他们的头像照片的个人记录)拖到目标(在我的情况下，一个城市列表)，然后更新数据库的拖动项目与项目的详细信息，他们被拖到。

目前我对单个项目使用此功能。

我有一个侧边栏的位置列表，我从数据库检索与EntityFramework:

<ul>
<li class="droppable">
    <span>Sydney</span>
</li>
<li class="droppable">
    <span>Brisbane</span>
</li>
<li class="droppable">
    <span>Melbourne</span>
</li>
</ul>

在我的主窗口，我有一个网格的人的图像和我使用Jquery UI可选的，使这些被选中:

<ul class="people-list" id="selectable">
    @foreach (var item in Model.People)
    {
        <li>
            <img src="@item.Photo" style="width:100%" class="img-polaroid" />                
        </li>
    }
</ul>
 $(function () {
    $("#selectable").selectable({
        selected: function (event, ui) {
            if ($(ui.selected).hasClass('click-selected')) {
                $(ui.selected).removeClass('ui-selected click-selected');
            } else {
                $(ui.selected).addClass('click-selected');
            }
        },
        unselected: function (event, ui) {
            $(ui.unselected).removeClass('click-selected');
        }
    });
});

我想做的是，一旦用户选择了一个或多个人，他们就可以将选中的人拖到其中一个位置，然后更新数据库。

因此，如果用户将PersonID 4,5和9拖动到'Sydney'，那么我需要异步更新数据库来执行此操作。

我已经添加了JQuery Draggable和dropable，我可以将个人拖动到其中一个位置，然后更新数据库，但是我不能让它与selectable一起工作，允许多个项目被选中。

$(function () {
    $(".img-polaroid").draggable({
        containment: "document",
        helper: 'clone',
        opacity: 0.70,
        zIndex: 10000,
    });
    $(".droppable").droppable({
        hoverClass: "ui-state-hover",
        tolerance: "pointer",
        drop: function (event, ui) {
            $.ajax({
                type: "POST",
                url: '/Person/UpdateLocations/' + $(this).attr("id") + '|' + $(ui.draggable).attr("id"),
                success: function (data) {
                    $('.draggable').draggable('destroy');
                    $('#successMsg').empty();
                    $('#successMsg').append(data);
                    $('#successDiv').show();
                    $('.draggable').draggable({ revert: true });
                }
            });
        }
    });
});