Skip to content
Related Articles

Related Articles

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>

Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :