重置 jquery 可拖动元素答案

【问题标题】：Reset jquery draggable elements重置 jquery 可拖动元素
【发布时间】：2023-03-20 13:16:01
【问题描述】：

我想将列表中的所有元素重置为初始位置。这是我的例子Jquery UI Droppable

这是我的重置功能

$(".reset").click(function() {
       // Code to reset all elements
});

我该怎么做？

【问题讨论】：

你一定是在开玩笑吧！ // Code to reset all elements 是注释，而不是 js 代码，您所做的只是将单击事件基本绑定到具有 reset 类的元素
对于“你的”示例（实际上是 jqueryUI 的演示），您可以destroy 可放置功能并将元素返回到原始状态，然后您可以再次定义可放置原始元素）
如果对您有帮助，请支持并接受我的回答，以便其他人知道这是正确的答案并帮助他们。

标签： jquery jquery-ui reset jquery-ui-droppable

【解决方案1】：

您可以使用以下代码：

首先为商品设置订单属性

// This code used for set order attribute for items
var numberOfItems = $("#gallery").find('li').length;
$.each($("#gallery").find('li'), function(index, item) {
    $(item).attr("order", index);
});

更改recycleImage函数

function recycleImage($item) {
    $item.fadeOut(function() {
        $item
            .find("a.ui-icon-refresh")
            .remove()
            .end()
            .css("width", "96px")
            .append(trash_icon)
            .find("img")
            .css("height", "72px")
            .end()
            //.appendTo($gallery)                 
            .fadeIn();
            // Add to old palce
            addToOlderPlace($item);
    });
}

添加 addToOlderPlace 函数

// This function used for find old place of item
function addToOlderPlace($item) {
    var indexItem = $item.attr('order');
    var itemList = $("#gallery").find('li');
    if (indexItem === numberOfItems - 1)
        $("#gallery").append($item);
    else if (indexItem === "0")
        $("#gallery").prepend($item);
    else
        $(itemList[indexItem - 1]).after($item);
}

Online demo (fiddle)

【讨论】：

@fray 请为我的答案投票，因为我知道并帮助了其他人，因为有些人只看到投票赞成的答案。