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!
