1

我有以下 JQuery 设置将项目从列表拖放到不同的列表中：

// Set what items are draggable
$(".widgetListItems").draggable(
{
    cursor: "move",
    opacity: 0.5,
    scroll: false,
    revert: "invalid",
    connectToSortable: "#dropList",
    stop: function (event, ui) { if (deleteItem) { ui.helper.remove(); deleteItem = false; } }
});

// Set what items can have objects dropped into them.
$(".dropableArea").droppable(
{
    accept: ".widgetListItems",
    tolerance: "touch",
    drop: function (event, ui)
    {
        deleteItem = true;

        var item = $(ui.draggable).text();
        item = $.trim(item);

        switch (item)
        {
            case "Preventative Care":
                $(this).append($("#panelPreventative"));
                $("#panelPreventative").show(1000);
                break;
            case "Medical Claims":
                $(this).append($("#panelMedicalClaims"));
                $("#panelMedicalClaims").show(1000);
                break;
            case "Capitation":
                $(this).append($("#panelCapitation"));
                $("#panelCapitation").show(1000);
                break;
        }
    }
});

$(".dropableArea").sortable(
{
    cursor: "move",
    connectWith: ".dropableArea",
    update: function (event, ui)
    {
        $(ui.item).css("margin", "30px 0px");
    }
});

我有一个<li>类“widgetListItems”，用户可以将其拖到屏幕上。接下来，droppable 是一个<ul>类“dropableArea”。我希望用户拥有的体验是，一旦他们将项目放入列表中，他们丢弃的项目就会被删除，并且会显示一个带有类“loadedWidgetPanel”的小部件。这就是我在“drop”事件中所做的。我也想要这个列表，用户可以将内容放入可排序的列表中。使用我拥有的代码，用户可以将项目放入列表中，显示小部件，并且一旦它们在页面上，他们就可以对小部件进行排序。

我想知道的是，是否可以对该列表进行排序，以便当用户将元素放入列表时，小部件会插入到用户放置它的位置，而不是在末尾附加。我知道它被附加是因为我在“drop”事件中所做的事情，但我想不出另一种方法来插入不同的项目。有人可以帮我吗？

4

1 回答 1

2

在你的drop: function() {}this 中，当一个项目被删除时触发的回调，在你执行你已经拥有的逻辑之后，你可以添加一个对排序例程的调用。一些快速而肮脏的jquery 字母排序示例。

于 2012-11-14T15:11:05.287 回答