script.aculo.us Drag & Drop Last Updated : 19 Apr, 2022 Comments Improve Suggest changes Like Article Like Report The DragDrop module can be used to make any element draggable or then it can be dropped in a drop zone. Making An element Draggable: Draggable elements can be made by making a draggable instance and then identifying the element to be made draggable Syntax: new Draggable( element_id, {options} ); Draggable Options: Options Description revert It is used to specify whether an element should return to its original position after being dragged.snap It is used to make a draggable element constraint its movements.zindex It used to specify the z-index in the CSS stylesheet.ghosting It is used to specify whether the element should be cloned in the drop area or move to it.constraint It is used to specify the draggable directions.handle It is used to specify the handle to trigger the dragging.starteffect It is used to define the function which is called when the specified element starts dragging.reverteffect it is used to define the function which is called when the specified element reverts the drag.endeffect It is used to define the function which is called when the specified element stops dragging. Callback Options: Options Description change Similar to onDrag triggered when the position of the element changes.onStart Triggered when a drag is initiated.onEnd Triggered when a drag is finished.onDrag Trigged continuously while the element is dragged and the mouse location is changing. Example: HTML <!DOCTYPE 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); }); } </script> </head> <body> <img id="element" src="gfg.png" /> </body> </html> Output: Creating the drop Area: Now we will be creating droppable instances to drop the element in the drop zone. Syntax: Droppables.add( element_id, {options} ); Droppable Options: Options Description HoverClass It is used to create an active hoverclass on the drop area.Containment It used to specify the id of the draggable element so that another element cannot be dropped in it.Accept When true, it only allows the elements having one or more CSS properties to be dropped over it.Overlap When a direction is given (horizontal/vertical) it will allow the user to drop the element only.If it is overflowing more than 50% in the given direction.Greedy It allows overlapping draggable inside a drop area, the draggable below another element won't be visible. Callback Options: OptionsDescription onHover It is triggered when an element hoversover the drop area.onDrop It is triggered when an element is dropped in the drop area. Example: HTML <!DOCTYPE html> <html> <head> <script type="text/javascript" src="prototype.js"> </script> <script type="text/javascript" src="scriptaculous.js"> </script> <script> window.onload = function () { $A($('draggable').getElementsByTagName( 'img')).each(function (item) { new Draggable(item, { revert: true, ghosting: true }); }); Droppables.add('dropArea', { hoverclass: 'hoverActive', onDrop: dropAppend } ); } function dropAppend(draggable, dropArea) { draggable.parentNode.removeChild(draggable); dropArea.appendChild(draggable); } </script> <style> #dropArea { float: left; height: 125px; width: 435px; border: 3px ridge green; padding: 10px; float: left; } .hoverActive { background-color: #7cfa5c; } #draggable img, #dropArea img { border: 1px solid green; } </style> </head> <body> <div id="dropArea"> </div> <div id="draggable"> <img src="gfg.png" /> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article script.aculo.us Drag & Drop S swapnil074 Follow Improve Article Tags : Technical Scripter JavaScript Web Technologies Technical Scripter 2020 script.aculo.us +1 More Similar Reads script.aculo.us Drag & Drop snap Option 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. 1 min read script.aculo.us Drag & Drop onEnd Option The script.aculo.us library is a cross-browser library that aims at improving the user interface of a website. The Drag & Drop module can be used to make any element drag-gable and also enables them to be dropped in a drop zone. The onEnd option is used to specify a callback function that would 3 min read script.aculo.us Drag & Drop onDrag Option The script.aculo.us library is a cross-browser library that aims at improving the user interface of a website. The Drag & Drop module can be used to make any element drag-gable and also enables them to be dropped in a drop zone. The onDrag option is used to specify a callback function that would 2 min read script.aculo.us Drag & Drop accept Option This script.aculo.us Drag & Drop accept Option is used to create an active accept condition where you can drag a draggable element to a drop area. In that drop area, the element will be placed if the accept class is the same as the class of your draggable element. Syntax: Droppables.add('element 2 min read script.aculo.us Drag & Drop onDrop Option This script.aculo.us Drag & Drop onDrop Option is used to call the callback function which is called when a suitable drag-gable element is dropped onto the drop target and the target accepts it. Syntax: Droppables.add('element', {onDrop: 'callbackFunction'} ); Values: function: This option takes 2 min read Like