script.aculo.us Drag & Drop revert Option Last Updated : 25 Nov, 2020 Summarize Comments Improve Suggest changes Share Like Article Like Report This script.aculo.us Drag & Drop revert Option is used returns to its original position when the drag ends. It also specifies whether the reverteffect callback will be invoked when the drag operation stops. Syntax: new Draggable('element', {revert:true}); Values: revert: This value holds two values true and false default it's false. Example: HTML <!DOCTYPE html> <html> <head> <script type="text/javascript" src= "scriptaculous-js-1.9.0/lib/prototype.js"> </script> <script type="text/javascript" src= "scriptaculous-js-1.9.0/src/scriptaculous.js"> </script> <script type="text/javascript"> window.onload = function () { $A($('draggables').getElementsByTagName('img')) .each(function (item) { new Draggable(item, { revert: true, ghosting: true }); }); Droppables.add('droparea', { hoverclass: 'hoverActive', onDrop: moveItem }); // Set drop area default non cleared. $('droparea').cleared = false; } function moveItem(draggable, droparea) { if (!droparea.cleared) { droparea.innerHTML = ''; droparea.cleared = true; } draggable.parentNode.removeChild(draggable); droparea.appendChild(draggable); } </script> <style type="text/css"> #draggables { width: 550px; height: 73px; } #gfg { width: 550px; height: 73px; } </style> </head> <body> <div id="draggables"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200817185016/gfg_complete_logo_2x-min.png"> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article script.aculo.us Drag & Drop onEnd Option S skyridetim Follow Improve Article Tags : JavaScript Web Technologies script.aculo.us Similar Reads script.aculo.us Drag & Drop reverteffect Option This script.aculo.us Drag & Drop reverteffect Option is used returns to its defined position when the drag ends. It also specifies whether the reverteffect callback will be invoked when the drag operation stops. Syntax: new Draggable('element', {reverteffect: 'effectFunction'}); Values: revertef 1 min read 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 greedy Option This script.aculo.us Drag & Drop greedy Option is used to stops processing hovering other droppable, under the drag-gable won't be searched. The default value of this option is true, that means the drop area will accept the draggable element false won't. Syntax: Droppables.add('element', {greedy 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 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 Like