Move items from one div to another

Hi people! I need some help to make somethink like this on the screenshot in linkedin. Can somebody give me info or show me some scripts to make this? I need a direction..

Click for the screenshot ->

http://avtorentacar.soul-design.org/print.jpg

Regards: Vlado

 

i just wrote this in 10 mins so excuse the crude marksmanship (or it could be i am just shite )
as a concept, say you have an array of items, for instance, divs like that that you may have styled and filled in with content depicting a list of cities and the cities you have visited.

<div id="cities" class="left bordered">
    <strong>Pick a city:</strong>
    <div class="city" data-id="1">Sofia</div>
    <div class="city" data-id="2">London</div>
    <div class="city" data-id="3">Paris</div>
</div>
<div id="visitedCities" class="left bordered"><strong>Cities visited:</strong></div>

HTML:

if you use mootools (or jquery) this can take place via some events like so (this is out of context skeletal view):

window.addEvent("domready", function() {
    // cities can go both ways... and a way to save / serialise it all
    var movingEvents = {
        right: function() {
            // move from left to right on click
            $("cities").getElements("div.city").removeEvents().addEvents({
                click: function() {
                    $("visitedCities").adopt(this.addClass("selected")); // this will move it and style it.
                    // provide a way of moving it back...
                    movingEvents.left();
                }
            });
        },
        left: function() {
            $("visitedCities").getElements("div.city").removeEvents().addEvents({
                click: function() {
                    $("cities").adopt(this.removeClass("selected")); // this will move it.
                    // provide a way of moving it right
                    movingEvents.right();
                }
            });
        },
        serialise: function() {
            // return an away of cities visited
            var visited = [];
            $("visitedCities").getElements("div.city").each(function(el) {
                visited.include({
                    city: el.get("text"),
                    id: el.get("data-id")
                });
            });
            return visited;
        },
        init: function() {
            // at start we only have data at left so get it to run.
            this.right();
            $("save").addEvents({
                click: function() {
                    console.log(movingEvents.serialise());
                }
            });
        }
    };

    movingEvents.init();    
    
});

PHP:

and some css...

.left {
    float: left;
}

.bordered {
    border: 1px solid #777;
    padding: 2px;
    width: 300px;
    margin: 2px;
    height: 200px;
}

.selected {
    background: #ccc;
}

.city {
    border: 1px dotted #aaa;
    margin-bottom: 1px;
    cursor: w-resize;
}

HTML:

you can see this as a working example here: http://fragged.org/dev/moving_data.php

notice the serialise function which is going to be handy to give you the selection of items picked in the end for whatever purposes. in the test instance i posted, i reference console.log so you need to see it on firefox or replace with a wrapper like this one:

http://fragged.org/creating-a-wrapp...g-function-for-ie-and-other-browsers_218.html

i hope this gets you started on the right path, you can do this via jquery also with some small adjustments.