Question

拖放多个后我想要取消选项，以便所有div在按下时恢复到原始状态和位置。

HTML：

<div class="connected">
    <div class="myDivs">Hello 01</div>
    <div class="myDivs">Hello 02</div>
    <div class="myDivs excludeThisCss">Hello 03</div>
    <div class="myDivs">Hello 04</div>
    <div class="myDivs">Hello 05</div>
    <div class="myDivs excludeThisCss">Hello 06</div>
    <div class="myDivs">Hello 07</div>
    <div class="myDivs">Hello 08</div>
    <div class="myDivs excludeThisCss">Hello 09</div>
    <div class="myDivs">Hello 10</div>
</div>
<button id="demo1" onclick="cancel()" title="Button">Cancel</button>

JavaScript的：

$(function() {
    $(".connected").sortable({
        connectWith: ".connected",
        items: ".myDivs:not(.excludeThisCss)"
    }).disableSelection();
});

function cancel() {
    // alert('cancelled');
}

请参阅小提琴：http://jsfiddle.net/adrianjsfiddlenetuser/zyUkd/6/

我见过使用.load函数的例子，但我不想加载新数据，只需刷新div

Answer 1

还有另一种更轻量级的解决方案。

首先，在DOM ready上，让初始索引存储到每个元素的data。

$(".connected").sortable({
    ...
}).children().each(function(index) {
    $(this).data("index", index);
});

然后，在取消时，让我们根据存储的索引恢复元素的位置，如下所示：

function cancel() {
    var indices = [];
    $(".connected").children().each(function() {
        indices.push($(this).data("index"));
    }).each(function(index) {
        var el = $(".connected").children().eq(indices[index]);
        if (!el.is(this)) el.before(this);
    });
}

DEMO： http://jsfiddle.net/zyUkd/13/

Answer 2

我能够通过将容器内的元素放在变量中来解决这个问题，然后在按下“取消”时使用变量数据删除/加载容器。如果您将其保存在变量中，它会将其重置为原始列表位置。

http://jsfiddle.net/zyUkd/12/

Answer 3

这是一种很好的方式：

声明一个全局var，以初始顺序存储元素。 var def;

在$(document).ready()上，$(function(){})，按初始顺序存储元素：

def = $('.connected').html();

最后，在cancel()函数上，将元素恢复为初始顺序：

$('.connected').html(def);

JSFiddle

这只是3行代码，不应该占用太多内存来存储几个DOM元素。

您也可以将$('.connected')元素备份到var，从文档中删除当前元素，并将var中的原始元素追加回页面的body / container div。

查看API documentation，.sortable("destroy")方法应该将可排序项目返回到其初始顺序，但是当我使用您的示例尝试时，destroy方法不起作用。

Answer 4

我建议使用键.data()将初始容器保存到元素的"initial-container"集合中，然后将其保存，.detach()和.append()保存到.data("initial-container")。< / p>

恢复到以前的状态 - 拖放

4 个答案: