[thelist] JS drag-drop script
Ken Snyder
ksnyder at coremr.com
Tue May 1 11:15:42 CDT 2007
Rick den Haan wrote:
> ...
>
> 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.
>
> ...
>
This can be done using the scriptaculous drag and drop with its built-in
options. (see
http://wiki.script.aculo.us/scriptaculous/show/Sortable.create and
http://wiki.script.aculo.us/scriptaculous/show/GhostlySortableDemo)
Sortable.create('td_id', {
ghosting: true, // the "clone" that moves with the cursor
only: 'draggable', // excludes divs without the css class "draggable"
hoverclass: 'indicator' // allows you to specify what the "opaque
square" indicator looks like (a css class name)
});
I didn't see you mention anything about dragging divs between tds, but
that can be done by passing an array of the other td ids to the
"containment" option. (Demo
http://wiki.script.aculo.us/scriptaculous/show/SortableListsDemo)
Scriptaculous has a large and active community of folks who would love
to help you tweak it to work exactly as you need. Their mailing list is
"Ruby on Rails: Spinoffs"
(http://groups.google.com/group/rubyonrails-spinoffs)
--Ken Snyder
More information about the thelist
mailing list