Rails spinoffs - Aug 2006 - Creating a "shelf" for drag and drop

Hi everyone. New to the list.

I''m trying to implement a "shelf" with Scriptaculous. I have
five boxes
(divs) at the top of my page, to which I would like users to be able to 
drag and drop ghosts of various elements (also divs) from the body of 
the page. This operation should be a copy, not a move; that is, if the 
drag succeeds (i.e., lands on the droppable), the ghosted element should 
be permanently attached to the shelf, and its opacity set back to 100%. 
If it fails, the ghosted element should revert back to its original 
position and vanish.

One further trick is that if the drag succeeds, I want the ghosted copy 
to "snap" into place on the shelf, and not end its move sort of
hanging
half-in, half-out, wherever the user dropped it.

There''s a part 2 to this question, wherein the user can drag things
back
out of the shelf into form elements on the page, but I''ll save that 
until I have this part working.

I found a couple of hints in the list archives, but unfortunately my 
limited skills weren''t able to make anything of them. The closest thing
I found was Scott Bronson''s May 23 post "Dragging a copy of an
image and
then reverting," [1] but his example URLs are no longer valid.

Thanks in advance for any advice or pointers.

Cheers,
Ben

[1] 
http://wrath.rubyonrails.org/pipermail/rails-spinoffs/2006-May/004032.html

-- 
Ben Kimball                              
<mailto:zubin-mD4EcvzDNrj5xfTjtVVUew@public.gmane.org>
Webmaster                                         <phoneto:512.232.2195>
Division of Continuing Education, UT Austin             <walkto:SW7,203>

Mostly there! I had a few "lightbulb" moments, and some of my hackish 
code seemed to work.

I wanted a draggable which would revert when it didn''t hit a droppable,
and which would "snap" into place as a child of the droppable if it
did.

<div class="droprow">
   <div class="dropbox" id="drop1"></div>
   <div class="dropbox" id="drop2"></div>
   <div class="dropbox" id="drop3"></div>
   <div class="dropbox" id="drop4"></div>
   <div class="dropbox" id="drop5"></div>
</div>

<div class="person" id="kimballben">
   <img class="icon" src="img/heart.png"
alt="Person" />
   Mr. Ben Kimball
</div>
<script type="text/javascript">
//<![CDATA[
   new Draggable(''kimballben'', {
     revert: true,
   });
   document.getElementsByClassName (''dropbox'').each ( function
(e) {
     Droppables.add(e, {
       hoverclass: ''over'',
       onDrop: function (drag, drop) {
         drag.revert = false;
         drop.appendChild(drag);
         drag.style.position = ''absolute'';
         drag.style.left = drag.style.top = 0;
       },
     });
   });
// ]]>
</script>

This seems to be doing the trick. I''m not sure if the onDrop anonymous 
function definition is ideal.

The next thing I''d like to do to enhance this is use the
"ghosting"
effect; that is, make the draggee a clone, so that the "drag-to-shelf"
operation is a copy, not a move.

Still happy to hear ideas or advice if anyone has any.

Thanks,
Ben

-- 
Ben Kimball                              
<mailto:zubin-mD4EcvzDNrj5xfTjtVVUew@public.gmane.org>
Webmaster                                         <phoneto:512.232.2195>
Division of Continuing Education, UT Austin             <walkto:SW7,203>

A couple more observations.
>     Droppables.add(e, {
>       hoverclass: ''over'',
>       onDrop: function (drag, drop) {
>         drag.revert = false;
>         drop.appendChild(drag);
>         drag.style.position = ''absolute'';
>         drag.style.left = drag.style.top = 0;
>       },
>     });
>   });
Safari doesn''t care for that trailing comma after the onDrop
definition.
The code didn''t work on Safari until I removed it.

Also, I''m now finding that on Internet Explorer/Win, an item which is 
dropped into a box and subsequently dragged will appear "behind" the 
dropboxes. Do I need to reset drag.style.z-index as well as position?

Thanks,
Ben

-- 
Ben Kimball                              
<mailto:zubin-mD4EcvzDNrj5xfTjtVVUew@public.gmane.org>
Webmaster                                         <phoneto:512.232.2195>
Division of Continuing Education, UT Austin             <walkto:SW7,203>