The snap option in the script.aculo.us Drag and Drop module is used to make a draggable element snap to a grid or constrain its movement in the defined space. It is set to false by default. It can be defined with a single value or a function that will define the places where the element would snap.
Syntax:
new Draggable ('element_id', {snap: size of the snap});
Values:
- snap: It is used to make a draggable element constraint its movements.
Example:
HTML
<html> <head>   <script type="text/javascript"           src="prototype.js">   </script>   <script type="text/javascript"           src="scriptaculous.js">   </script>   <script>     var elements = ['element'];     window.onload = function () {       elements.each(function (item) {         new Draggable(item, {                       // Set the snap to a grid           // of 500 pixels           snap: 500         }) });     }   </script> </head> <body>     <img id="element" src="gfg.png" /> </body> </html> |
Output:

