script.aculo.us Drag & Drop snap Option

Last Updated : 17 Mar, 2021

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>