Вопрос по jquery – jQuery - переместить элемент и вернуться в его точное предыдущее местоположение?

Question

Вопрос по jquery – jQuery - переместить элемент и вернуться в его точное предыдущее местоположение?

6

Задан 15 May 2012, 00:50 от Charles

6

Я пытаюсь использовать jQuery для перемещения элемента из одного места в другое в DOM. Рядом с ним есть элементы, идентичные исходному контейнеру, так как я могу сохранить его точное предыдущее местоположение, чтобы он вернулся к нему? Вот пример ...

<div class="container"></div>
<ul>
    <li></li>
    <li><div class="move">Content</div></li>
    <li></li>
    <li><div class="move">Content</div></li>
    <li></li>
</ul>

... div "move" по отдельности перемещаются в div "container", а затем возвращаются в свое предыдущее местоположение по событию с помощью jQuery .appendTo (). Как я могу обеспечить, чтобы каждый div «move» возвращался в свое точное предыдущее местоположение, определяя, откуда он был перемещен (его точное местоположение в DOM относительно документа или другой указанный родительский контейнер)?

EDIT: я исправил классы в div, так как в конкретном случае, с которым я работаю, элементы списка являются точными копиями (структурно), с уникальным содержимым в соответствующих элементах. Кроме того, событие для перемещения div «move» обратно в исходное местоположение - это нажатие кнопки внутри него. Как перемещенный элемент узнает, куда нужно вернуться назад после перемещения (в частности, как он узнает, какой элемент списка в списке)?

Если вы хотите получить ответы лучше, чем те, которые у вас уже есть, обновите HTML-код, чтобы отобразить то, что вы спрашиваете. Во-первых, если у вас есть «элементы, идентичные исходному контейнеру рядом с ним», вы можете показать 2 контейнера. Если в вашем документе «элементы списка являются точными копиями друг друга», удалите их уникальные классы. Fabrício Matté

15 May 2012, 00:09

@ FabrícioMatté Готово, спасибо за предложение. Charles

15 May 2012, 00:55

Я бы также ответил на ваш вопрос, но с помощью этого HTML трудно точно сказать, что вы ожидаете. Fabrício Matté

15 May 2012, 01:05

3 ответа

Похожие вопросы

от undefined · Answer 1 · 14 May 2012, 19:12

3

14 May 2012, 19:12 от undefined

3

clone их,append их и, наконец,hide оригинальный div и взаменremove клонированный div иshow оригинал

Точно такой же ответ, как я печатал. Думаю, это лучший метод. Anonymous

14 May 2012, 22:15

@ Fabrício Matté Я не думаю, что содержимое div полезно хранить в БД. undefined

14 May 2012, 22:24

Выглядит неплохо, однако, если OP когда-либо должен перебирать все элементы, например чтобы получить данные и отправить на другую страницу, он должен добавить проверку с помощью.is(':visible') хотя Fabrício Matté

14 May 2012, 22:17

@ Raminson, если OP пытается воспроизвести Сортировка со своими элементами divs / list или по каким-либо причинам он хотел бы использовать отсортированные элементы div / items, я просто отметил, что будут дублирующиеся элементы и потребуется одна дополнительная проверка. Fabrício Matté

14 May 2012, 22:29

@ Fabrício Matté хорошо, я знаю, что ты имеешь в виду, чувак;). undefined

14 May 2012, 22:32

от D. Strout · Answer 2 · 14 May 2012, 19:10

1

14 May 2012, 19:10 от D. Strout

1

.parent() в переменной, затем используйте.append() или.appendTo() чтобы вернуть его, когда будет готов.

@ Madbreaks Да, это главный вопрос. Интересно, есть ли в jQuery базовая функция или плагин, который возвращает точную позицию DOM элемента относительно документа? Аналогично XPath, как в Firebug Вот XPath к вашему комментарию ... / html / body / div [4] / div [2] / div / div [2] / div [2] / div [4] / table / TBODY / тр [2] / тд [2] / DIV / стол / TBODY / тр [3] / тд [2] / DIV / SPAN Charles

14 May 2012, 23:51

Хороший ответ, я не знал.parent() будет хранить относительный индекс вложенного элемента, из которого вы вызываете его. Действительно полезная информация, я тоже скоро добавлю +1. Fabrício Matté

14 May 2012, 22:38

HTMLявляетс XML, почему бы не использовать xpath? Docs.jquery.com / DOM / Обход / Селекторы # XPath_Selectors Madbreaks

14 May 2012, 23:53

Я сделал Скрипка чтобы проверить функциональность вашего кода, я уверен, что ваш код будет полезен в будущем. Fabrício Matté

14 May 2012, 22:53

Это не сработает, поскольку, согласно вопросу опера, «рядом есть элементы, идентичные исходному контейнеру». Простое хранение родителя не сохранит позицию элемента родитель Madbreaks

14 May 2012, 23:37

от Madbreaks · Answer 3 · 14 May 2012, 20:58

поэтому я надеюсь, что они применимы к вашей ситуации.

Я думаю, у тебя есть обработчик кликов наdiv.move элементы, которые перемещают их вcontainer div.

CSS:

.placeholder { display:none; }

JS:

var id,
    gid = 0;

$('.move').click(function(e){
    if(!$(this).parents('.container')){
        // Move to container
        id = 'placeholder-' + gid++;
        $(this)
            .before('<div class="placeholder ' + id + '"></div>')  // Save a DOM "bookmark"
            .appendTo('.container')                               // Move the element to container
            .data('placeholder', id);                              // Store it's placeholder's info
    }
    else{
        // Move back out of container
        $(this)
            .appendTo('.placeholder.' + $(this).data('placeholder'))  // Move it back to it's proper location
            .unwrap()                               // Remove the placeholder
            .data('placeholder', undefined);        // Unset placeholder data
     }
 });

Ваш HTML будет выглядеть так после нажатия на первыйdiv.move:

<div class="container">
    <div class="move>Content</div>
</div>
<ul>
    <li></li>
    <li><div class="placeholder placeholder-0"></div></li>
    <li></li>
    <li><div class="move">Content</div></li>
    <li></li>
</ul>

У меня это работает, хотя приведенный выше код не проверен. Надеюсь, это передает идею. Что мне нравится в этом подходе:

Нет дублирования элементов (например, это может нарушить требования уникального идентификатора) Минимальное воздействие DOM События и обработчики перемещенных элементов остаются нетронутыми, но не дублируются

Это идеально? Нет, но это работает хорошо и довольно чисто. YMMV.

Ура