O'Reilly logo

Prototype and Scriptaculous: Taking the Pain out of JavaScript by Chris Angus

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

1.4. Dragging and Dropping Without Scriptaculous

if you thought writing effects in raw JavaScript was hard, coding drag-and-drop is even worse! Again, the good news is that with Scriptaculous, this complexity is dealt with. To create a simple drag-and-drop, example we may do the following:

<img id="dragTarget" class="cdragTarget" src=" dragTarget.jpg"/>

<div id="dropTarget" class="cdropTarget">
          <img src="dropTarget.jpg" />
</div>

<script type="text/javascript">

         new Draggable('dragTarget',{revert:true});

         Droppables.add(
                'dropTarget',
                {
                     accept: 'cdragTarget',
                     onDrop: function(element)  { alert('dropped');}
                }
         );

</script>

Hopefully by now you'll be hooked, and want to know more about how to avoid the challenges of raw JavaScript coding. However, before diving into the APIs, it's a good idea to review some JavaScript concepts that are used when calling each library. If you are already a JavaScript Guru, feel free to jump ahead.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required