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:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
… [Trackback]
[…] Information on that Topic: geeksforgeeks.org/script-aculo-us-drag-drop-snap-option/ […]