JSFiddle - React, Tailwind, and code Playground

by Anshuman Dwibhashi

HTML

<a href="http://jsfiddle.net/anshudwibhashi/94ZZu/4/">View code</a><br/><br/>

<section id="left">This is the landing zone!</section>
<section id="right"><img id="img" width="100px" height="100px" src="http://lh4.googleusercontent.com/-A4PMZCZ_Fyg/AAAAAAAAAAI/AAAAAAAAB1w/XYEaZmdFVes/s512-c/photo.jpg"></section>

CSS

#left{
    float:left;
    width:250px;
    height:250px;
    margin:3px;
    padding:10px;
    border:5px solid red;
}
#right{
    float:left;
    width:250px;
    height:250px;
    margin:3px;
    padding:10px;
    border:5px solid green;
}

JavaScript

init();
function init(){
    // If you can't recall the ids
    // Check the previous post in this series

    img = document.getElementById("img");
    box1 = document.getElementById("left");
    box2 = document.getElementById('right');

    // The event that is called when you start dragging
    img.addEventListener("dragstart", dragged);

    // The event that is called when you finish dragging
    box1.addEventListener("drop", dropped1);
    box2.addEventListener("drop", dropped2);
    // The events that are called when you enter the box
    // and mouseover a box while dragging
    box1.addEventListener("dragenter",function(e){e.preventDefault()});
    box1.addEventListener("dragover",function(e){e.preventDefault()});
    box2.addEventListener("dragenter",function(e){e.preventDefault()});
    box2.addEventListener("dragover",function(e){e.preventDefault()});
}

function dragged(e){
    var code = '<img id="img" width="100px" height="100px" src="http://lh4.googleusercontent.com/-A4PMZCZ_Fyg/AAAAAAAAAAI/AAAAAAAAB1w/XYEaZmdFVes/s512-c/photo.jpg">';
    e.dataTransfer.setData('Text', code);
}

function dropped1(e){
    e.preventDefault();
box1.innerHTML=e.dataTransfer.getData('Text');
    box2.innerHTML='You can use this as the landing zone too!';
    init();
}

function dropped2(e){
    e.preventDefault();
box2.innerHTML=e.dataTransfer.getData('Text');
    box1.innerHTML='This is the landing zone!';
    init();
}