php - 如何通过 JS/PHP 单击列表项本身将元素从 2 个列表(来自不同区域)移动到 1 个列表？

Question

我在设置元素列表并将它们相互移动时遇到了一些问题。

是否可以有多个列表，每个元素中都有一个链接以将其移动到指定列表？即在操作旁边带有加号的操作列表，单击加号并移动到指定的框？此外，是否可以从该页面加载一个灯箱(我猜代码必须是内联的)并将这些名称也移动到特定列表？

Example Images

---

更广泛地了解我迄今为止所做的努力...

最初的问题是我无法使用列表框，因为它们在每个单独的浏览器中都是本地呈现的。通过列表框我能够设置它，但通过下面的代码触发(在 Stack overflow 上找到)。虽然它为我提供了部分功能，但它没有达到我正在寻找的目标。

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 的可排序功能及其连接多个(最重要的是可设置样式的列表)并在彼此之间拖动的能力。这适用于并排 table ，但它没有提供我一直在寻找的整体可用性。

所以，我已经到了我不确定该往哪里前进的地方。虽然我可以绕过 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一次分配列表元素上的事件。 在 listA 上，我们会做:

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

这意味着每当在 #listA 中单击具有类 action 的任何元素时，然后找到它所代表的元素 (listItem)，并将其移动到列表 B。同样，在列表 B 上，我们执行相反的操作:

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