[thelist] JS drag-drop script

[Rick den Haan]

List,

I have Googled on this, and encountered lots of great scripts and libraries,
but none of them seemed to do quite what I need, and I don't have the time
to figure out how to build what I need myself. Can anyone recommend a script
that will do what I need?

Here's my situation (sorry, testpage unavailable):

+----------------+----------------+----------------+----------------+
|                |                |                |                |
|   +--------+   |   +--------+   |   +--------+   |   +--------+   |
|   |        |   |   |        |   |   |        |   |   |        |   |
|   +--------+   |   +--------+   |   +--------+   |   +--------+   |
|                |                |                |                |
|   +--------+   |   +--------+   |   +--------+   |   +--------+   |
|   |        |   |   |        |   |   |        |   |   |        |   |
|   +--------+   |   +--------+   |   +--------+   |   +--------+   |
|                |                |                |                |
+----------------+----------------+----------------+----------------+

The four columns are TDs. The inner blocks are DIVs. There are always 4 TDs,
but the number of DIVs varies. There can even be empty columns.

I need to be able to sort the DIVs through Drag & Drop. When I start
dragging a particular DIV, it should create a clone that moves with the
cursor, and both the original and the clone should become semi-transparent.
When I move it near a droppable location (vertically in between two other
DIVs, or at the top or bottom of any TD), an indicator should be positioned
there (can be an opaque square for the time being) of the exact size of the
DIV that is being dragged. Dropping the DIV should snap it into its new
position, or back to its old position.

These DIVs are all the same width, but the height is different. Also, I need
to be able to exclude certain DIVs from being moved. For example, if I set
the first DIV in the first TD to be non-movable, I shouldn't be able to drag
it, nor should I be able to position another DIV above it.

I'm going to keep Googling, because I can't be the first one to need
something like this, but if anyone here can save me a few minutes I'd be
grateful :)

Thanks in advance,

Rick.