contact

how to start a scriptaculous drag with code

Usually a scriptaculous draggable will only start the drag if you click on it. As I was adding drag and drop functionality to a web based filebrowser I actually wanted to start the drag of an other object when the user clicked on a file and dragged it. So the user clicks on a file from a list view but does drag the actual dom element from the list view. the click on the file calls a function that slips a file icon under the mouse of the user and starts the drag of that file icon. That way a user can drag and drop just the icon which looks much nicer and gave me the ability to drag and drop all selected files from the list view. its actually pretty simple, you just pass on the click event to the initDrag method of your draggable.

</pre>
$('yourObjectThatWillBeClicked').observe('mousedown', function(event){
 //observe the object for clicks
 $('yourActualDraggable').setStyle({
 // slipping the draggable under the users mouse
 position:'absolute',
 top:Event.pointerY(event)-16+'px',
 // this gets us the position of the users cursor
 left:Event.pointerX(event)-24+'px'
 })
 Drager=new Draggable('yourActualDraggable',onEnd:function(){Drag.destroy()});
 // making it a real scriptaculous draggable
 Drager.initDrag(event)
 // passing on the event and starting the drag
 }
<pre>
screenshot that illustrates this technique in my application

screenshot that illustrates this technique in my application

script.aculo.us

Tags: , , , ,

This entry was posted on Saturday, August 2nd, 2008 at 16:47 and is filed under Tech Questions, websites. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

  1. Chris April 28, 2009 at 20:46

    Thanks for the above code. It really helped me with a project I was working on — I had been trying for hours to get the effect described, but given up, until I came across your blog.

    One question: how did you determine the -16 and -24, was it just guess and check?

  2. Christoph Peter April 28, 2009 at 20:57

    the two numbers are half the width and height of the symbol-icon that I want to drag around, so the mouse is centered in the middle. if you do not specifiy these the pointer of the mouse will be in the upper left corner which is usually not desired. it accutally bad practice of put “magic numbers”(actual numbers) into code but for this simple demonstration it worked. hope that helps, and good luck with your project