Возврат к предыдущему состоянию - перетаскивание

После перетаскивания нескольких я хотел бы отменить отмену, чтобы все 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

Вот она. :) Я был слишком ленив, чтобы закодировать его, но вам это удалось. Congrats. –

Я бы рекомендовал сохранить исходный контейнер в коллекции .data() элемента с ключом "initial-container", а также по возврату .detach() и .append() к нему .data("initial-container").

источник

2012-05-28 14:08:14

Я смог решить это, поместив элементы внутри вашего контейнера внутри переменной, а затем удалив/загрузив контейнер с переменными данными, когда вы нажмете «cancel». Он сбрасывает его в исходное положение списка, если вы сохранили его в переменной перед записью.

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

источник

2012-05-28 14:11:22

Это отменяет только последнее изменение. – VisioN

Новое редактирование прекрасно работает. –

Здесь идет старый добрый вылепленный путь:

Объявляем глобальный вар для хранения элемента в исходном порядке. 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 не работал, когда я попробовал его с вашим примером.

источник

2012-05-28 14:22:36

Возврат к предыдущему состоянию - перетаскивание

ответ

Смежные вопросы