1

拖放多个后，我希望取消选项，以便所有 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

4

4 回答 4

3

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

首先，在 DOM 准备就绪时，让我们存储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);
    });
}​

演示：http: //jsfiddle.net/zyUkd/13/

于 2012-05-28T14:41:20.687 回答
1

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

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

于 2012-05-28T14:11:22.923 回答
1

这是一种很好的老式方式：

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

在您的$(document).ready(), 即 ,$(function(){})按初始顺序存储元素：

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

最后，在您的cancel()函数中，将元素恢复到初始顺序：

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

JSFiddle

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

您还可以将$('.connected')元素备份到 var，从文档中删除当前元素，并将原始元素从 var 附加回页面的主体/容器 div。

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

于 2012-05-28T14:22:36.823 回答
0

我建议.data()使用 key 将初始容器保存到元素的集合中，然后"initial-container"在还原时保存到它的..detach().append().data("initial-container")

于 2012-05-28T14:08:14.063 回答