JSFiddle - React, Tailwind, and code Playground

by jpark7ca

HTML

<!-- http://www.html5rocks.com/en/tutorials/dnd/basics/ -->
<!-- http://jsfiddle.net/kHuhR/28/ -->
<body>
    <div id="div1" ></div>
    <br /><br /><br />
    <div id="target1" class="target" draggable="true">
    <span>Target One</span>
    </div>
    <br />
    <div id="target2" class="target" draggable="true">
    <span>Target Two</span>
    </div>
    <br /><br /><br />
    <div id="div2" ></div>    
</body>

CSS

#div1, #div2 {
    width: 305px;
    height: 70px;
    padding: 10px;
    border: 1px solid #aaaaaa
}
.target {
    width: 250px;
    border: 2px dotted #cccccc;
    background-color: #aaaaaa;
}

JavaScript

var OnDragOver = function(evt) {
    evt.preventDefault();
};

var OnDrop = function (evt) {
    evt.preventDefault();
    var data = evt.originalEvent.dataTransfer.getData("text");
    evt.target.appendChild(document.getElementById(data));
    alert(data+" droped");
};

var OnDropV2 = function (evt) {
    evt.preventDefault();
    var data = evt.originalEvent.dataTransfer.getData("text");
    evt.target.appendChild(document.getElementById(data));
    alert(data+" droped in v2");
};


$("#div1").on("drop", OnDrop)
          .on("dragover", OnDragOver);

$("#div2").on("drop", OnDropV2)
          .on("dragover", OnDragOver);


$(".target").on("dragstart", function(evt){
    //alert(evt.target.id);
    evt.originalEvent.dataTransfer.setData('text', evt.target.id);
});

//var div1 = document.getElementById("div1");
//var target1 = document.getElementById("target1");

//div1.ondragover = function(evt) {
//    //alert("entered");
//    evt.preventDefault();
//}

//target1.ondragstart = function(evt) {
//    alert(evt.target.id);
//    evt.dataTransfer.setData('text', evt.target.id);
//    //alert("debug");
//}

//div1.ondrop = function (evt) {
//    //alert("entered");
//    evt.preventDefault();
//    var data = evt.dataTransfer.getData("text");
//    evt.target.appendChild(document.getElementById(data));
//}