Prototype: drag, drop and sortables

Drag, drop and sortables in Prototype and Script.aculo.us Ajax tutorial

http://webdesign.torn.be/tutorials/javascript/prototype/sort-images-with-p...

Need more? See the complete list of my Ajax tutorials with Prototype

Drag, drop and sort images with Prototype and Script.aculo.us
a fresh how-to guide with the help of the powerful Javascript framework named Prototype and its glamouroussidekick Script.aculo.us

1. Demo: "Drag, drop and sort images with Ajax and Prototype & Script.aculo.us"
Learn how to drag, drop and sort images and save this order to the database by using the Javascript Prototype with Script.aculo.us libraries.

Regular drag and drop.

Drag and drop between two DIV elements.

2. Introduction
2.1. What is Prototype?
Prototype is a Javascript frameworkthat aims to ease development of dynamic web applications. Among other things that this framework can offer, what really interests us here is that the guys at Prototype have an excellent and easy-to-use toolkit for developing Ajax applications. Furthermore, we can elaborate on Prototype by using Script.aculo.us which adds even more functionality and some interesting special effects...

2.2. Youwill need:
1. to download the Prototype Javascript framework 2. to download the Script.aculo.us libraries, a collection of Web 2.0 style JavaScript libraries that help web developers to easily add visual and ajax effects to projects. These libraries depend on Prototype. The download also includes a copy of Prototype. 3. Preferably a (local) server which runs PHP & MySQL. As we will save the orderthe way we sorted the images. I strongly recommend XAMPP. XAMPP is an easy to install Apache distribution containing MySQL, PHP and Perl. XAMPP is really very easy to install and to use - just download, extract and start.

3. The front-end code to initialize the drag, drop and sortable list
Save as: index.php

1 de 6

30/11/2010 09:26 p.m.

Drag, drop and sortables in Prototype andScript.aculo.us Ajax tutorial

http://webdesign.torn.be/tutorials/javascript/prototype/sort-images-with-p...

view plain

copy to clipboard

print

?

01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60.61. 62. 63. 64.

Drag, drop and sort images with Javascript's Prototype // //

view plain

copy to clipboard

print

?

01. 02.



Make sure that the path is correct and that Prototype is loaded before Script.aculo.us.
view plain copy to clipboard print ?

01.

document.observe('dom:loaded', function() { });

With this code we make sure this code only executeswhen the document is loaded: it makes the DOM available to us.
view plain copy to clipboard print ?

01.

var changeEffect;

We declare a variable by using the keyword var that we will use later. Not doing this will result in an error.
view plain copy to clipboard print ?

01.

Sortable.create('sortlist', { tag: 'img', overlap:'horizontal', constraint:false,

Actually making asortable list is very easy with Prototype. In fact you can do it as easy as this: Sortable.create(element [,options]) or translated to our example: Sortable.create('sortlist'). The default behaviour of sorting applies to li-elements. But you can sort any element you want, like div, p, img and so on. So, to override this default setting we use the [,options] of this function. Use the tag option tospecify the type of sortable elements within the container. Like I said, this defaults to li-elements. In our example we use images, so we set this option to the element img.

3 de 6

30/11/2010 09:26 p.m.

Drag, drop and sortables in Prototype and Script.aculo.us Ajax tutorial

http://webdesign.torn.be/tutorials/javascript/prototype/sort-images-with-p...

In this example we set the...