How to move items from 2 lists (from different areas) to 1 list by clicking the list items themselves, via JS/PHP?

Question

I've been having some issues setting up a list of items and moving them between each other.

Is it possible to have multiple lists, with a link inside each item to move it to a specified list? ie List of actions with a plus next to the action, click the plus and move to a specified box? Furthermore, would it be possible to then load a lightbox (code would have to be inline I'd guess) from that page and move those names to the specific list as well?

Example Images

---

More broad view of my efforts so far...

The initial issue being that I could not use listboxes due to their being rendered natively inside each individual browser. Through listboxes I was able to set this up, but with a trigger via the code below (found on Stack overflow). While it gave me partial functionality it did not get the target I was looking for.

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]);
}

}

---

I then moved onto jQueryUI's sortable and its ability to connect multiple, and most importantly, style-able lists and to be dragged between each other. This works for the side by side tables, but it does not offer the usability I was looking for overall.

So, I've come to where I'm unsure as to where to move forward. While I can get around PHP, I wouldn't know where to start with this one personally. I'm open to any and all options!

Answer 1

If I understand you correctly, you want to move items between two lists. When something is clicked in list A, it's supposed to be moved to list B. And when an item on list B is clicked, it should to be moved to list A.

Assuming the structure of a list looks like:

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

You could use live or delegate to assign the events on the list elements once. On listA, we would do:

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

This means that whenever any element with class action is clicked inside #listA , then find the item ( listItem ) represented by it, and move it to list B. Similarly, on list B, we do the reverse:

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

Answer 2

You could also try the jQuery-UI Framework which provides you with a large choice of interface-widgets and much more.
Find it here: jQuery UI (The link should take you directly to sortable lists).

The implementation is very effective and easy with Googles CDN for Javascript-Libraries (just search for "Google AJAX Libraries API" and you'll find it)