Question

我有以下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”事件中所做的事情而被追加，但是我无法想出一种不同的方式来插入不同的项目。有人可以帮助我吗？

Answer 1

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

JQuery Draggable，Droppable，＆amp;可以用不同的项目排序

1 个答案: