Software developer blog

Drop in, Drop out

Well... I couldn't come up with any better name for this:

My original aim was to create a website element, that provides an intuitive way to add, and remove certain things from the users inventory. I didn't really find any good use for it yet, so I decided to make it open source. (Well... you don't have many other choices with JS anyway, since obfuscators are basically useless in protecting code...) It's released under a GPL license, but if you use it be nice and drop me a comment with the link, so that I can check it out.


Download the DropInOut.js and DropInOut.css file along with (and prototype). Include them in the head of your HTML page as usual.

Now you can add a div element to your web page, that shall become the DropInOut:

<div id='dropinout1'>
    {"included":["Lorem Ipsum","Sit Dolore","Mature dore"],
      "available":["Lorem Ipsum","Cool Tool","Mature dore",
      "Sit Dolore","Rom Dom","Tamara Para","Vakara Nara",
      "Lupro Toeo","Ssas Ekdj","Farea Demitos", "Kompiter Sorebus",
      "Shitakun Mitriku", "Matrini Dompine", "Bortuke Camlike"]}

The text inside the div element is a JSON object that describes the initial state of the element. The included property is an array of elements that should be in the included elements (left side) panel of the DropInOut, while the available property is an array of all possible elements including the ones that are included. After that all you need to do is to include this line into your javascript somewhere:

Drino1 =  new DropInOut('dropinout1');

Retrieving values

Obviously an input element is of no use if you can not extract the changes from it. One way to do that would be to call the function that returns changes, or the one that returns the included elements:


Most of the time however one includes input elements into forms. To make things a bit more comfortable I included two options into the constructor of DropInOut, that allows you to hook a hidden input element onto DropInOut. Let's suppose we have two of these input elements with ids "changes" and "included". Than we can invoke the constructor like this:

Drino1 =  new DropInOut('dropinout1',
        { changeselement: 'changes' , includedelement: 'included' } );

Auto-complete version

Sometimes you may have more options than what fits into the right pane of the DropInOut element. In those cases it might come handy, that it has an auto-complete mode:

It works pretty much the same way, but the "available" property of the initializer JSON object (the one that was simply written inside the container DOM element) MUST be omitted, and an extra url option has to be specified in the constructor:

Drino1 =  new DropInOut('dropinout1',
        {url: 'AutoComplete.php', noduplicates:true } );

DropInOut uses the auto-complete element from, so please check out the details on how to write AutoComplete.php there. For further details on the interface of the DropInOut object, feel free to look into the code. (As one of my friends used to say: "The code speaks for itself!" The only problem was, that - unlike me - he didn't use comments, and his variable names were pretty far from being descriptive...)

@ //