CHRISTOPHJPETERChristoph Peter

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

script.aculo.us