恢复到以前的状态 - 拖放

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

来源

2012-05-28 blue-sky

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

首先，在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/

来源

2012-05-28 14:41:20 VisioN

好的工作。为什么我不能想到这一点？ –

@tpaksu谢谢！我的+1在哪里？：D嗯，这是我想起来的第一个想法... – VisioN

这是它。 :)我懒得为它编写代码，但你成功了。恭喜。 –