Question

I am creating an application where I am implementing Html5 Drag and Drop Functionality, and its working fine. Now Its an application where may be dropped item not needed in that case I want to again drag element and drop to the previous position. I see an example here http://ashishware.com/MochikitDnD.shtml but its using MochiKit.js for their sample and I don’t want any external plugin/js. Please provide me a sample or code for the same. My Drag and Drop code looks like :

function allowDrop(ev)
    {
            ev.preventDefault();
    }

function drag(ev)
    {
            ev.dataTransfer.setData("Text",ev.target.id);
    }

function drop(ev)
    {
            ev.preventDefault();
            var data=ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));
    }

and Html looks like

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<div id="drag1" draggable="true" ondragstart="drag(event)" ondragover="allowDrop(event)"></div>

Thanks in advance 🙂

Answer 1

For you be able to drag something ‘back’ you need a place to drag things back to, like this:

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="div2"ondrop="drop(event)" ondragover="allowDrop(event)">
    <div id="drag1" draggable="true" ondragstart="drag(event)"></div>
</div>

Other than that, your code works (in Chrome, Firefox and Opera that I tested).