Как переместить элементы из 2 списков (из разных областей) в 1 список, щелкая сами элементы списка через JS / PHP?

Question

У меня были некоторые проблемы при настройке списка элементов и перемещении их между собой.

Можно ли иметь несколько списков со ссылкой внутри каждого элемента, чтобы переместить его в указанный список? то есть список действий с плюсом рядом с действием, щелкните на плюсе и перейдите в указанное поле? Кроме того, можно ли затем загрузить лайтбокс (код должен быть встроенным, я полагаю) с этой страницы и переместить эти имена в конкретный список?

Примеры изображений

---

Более широкий взгляд на мои усилия до сих пор ...

Первоначальная проблема заключалась в том, что я не мог использовать списки из-за того, что они отображались внутри каждого отдельного браузера. Через списки я смог установить это, но с помощью триггера через код ниже (найден в переполнении стека). Хотя он дал мне частичную функциональность, он не достиг цели, которую я искал.

document.getElementById('moveTrigger').onclick = function() {

var listTwo = document.getElementById('secondList');
var options = document.getElementById('firstList').getElementsByTagName('option');

while(options.length != 0) {
    listTwo.appendChild(options[0]);
}

}

---

Затем я перешел к сортируемому jQueryUI и его способности соединять несколько и, что наиболее важно, стилизованные списки и перетаскивать их между собой. Это работает для соседних столов, но не обеспечивает удобство использования, которое я искал в целом.

Итак, я пришел туда, где не уверен, куда двигаться дальше. Хотя я могу обойти PHP, я не знаю, с чего начать лично. Я открыт для любых вариантов!

Answer 1

Если я вас правильно понимаю, вы хотите перемещать элементы между двумя списками. Если щелкнуть что-либо в списке A, оно должно быть перемещено в список B. А если щелкнуть элемент в списке B, его следует переместить в список A.

Предполагается, что структура списка выглядит следующим образом:

<div id="listA">
    <div class="listItem">
        <input type="button" class="action" value="+" />
        Action 1
    </div>
    ...
    ...
</div>

Вы можете использовать live или delegate, чтобы один раз назначить события элементам списка. В списке A мы сделаем:

$("#listA").delegate(".action", "click", function() {
    var item = $(this).closest('.listItem');
    $(this).val('-');
    $("#listB").append(item);
});

Это означает, что всякий раз, когда любой элемент с классом action щелкается внутри #listA, затем найдите представленный им элемент (listItem) и переместите его в список B. Аналогично, в списке B мы делаем обратное:

$("#listB").delegate(".action", "click", function() {
    var item = $(this).closest('.listItem');
    $(this).val('+');
    $("#listA").append(item);
});

Answer 2

Вы также можете попробовать jQuery-UI Framework, который предоставляет вам большой выбор интерфейсных виджетов и многое другое.
Найдите его здесь: jQuery UI (ссылка должна привести вас непосредственно к сортируемым спискам).

Реализация очень эффективна и проста с Googles CDN для Javascript-библиотек (просто найдите «Google AJAX Libraries API», и вы найдете его)