Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article Drag & Drop revert Option

  • Last Updated : 25 Nov, 2020

This 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.


new Draggable('element', {revert:true});


  • revert: This value holds two values true and false default it’s false.



<!DOCTYPE html>
    <script type="text/javascript" src=
    <script type="text/javascript" src=
    <script type="text/javascript">
        window.onload = function () {
                .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;
    <style type="text/css">
        #draggables {
            width: 550px;
            height: 73px;
        #gfg {
            width: 550px;
            height: 73px;
    <div id="draggables">
        <img src=


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!