[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 

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 

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" 

--Ken Snyder

More information about the thelist mailing list