Drag&Drop (mouse events)

by Alexander Shutov

HTML

<div id="box1" class="box">
    <div class="item" draggable="true"></div>
</div>
<div id="box2" class="box"></div>

CSS

html, body {
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    overflow:hidden;
}
.box {
    width:4em;
    height:4em;
}
#box1 {
    background-color:#a42;
}
#box2 {
    background-color:#24a;
}
#box1.target, #box2.target {
    background-color:#2a4;
}
.item {
    width:2em;
    height:2em;
    background-color:#222;
}

JavaScript

var dragged;

document.addEventListener("drag", function (event) {}, false);

document.addEventListener("dragstart", function (event) {
    dragged = event.target;
}, false);

document.addEventListener("dragend", function (event) {
    // reset the transparency
    event.target.style.opacity = "";
}, false);

document.addEventListener("dragover", function (event) {
    event.preventDefault();
}, false);

document.addEventListener("dragenter", function (event) {
    if ($(event.target).hasClass("box")) {
        $(event.target).addClass("target")
    }
}, false);

document.addEventListener("dragleave", function (event) {
    if ($(event.target).hasClass("box")) {
        $(event.target).removeClass("target")
    }
}, false);

document.addEventListener("drop", function (event) {
    event.preventDefault();
    if ($(event.target).hasClass("box")) {
        $(event.target).append(dragged)
    }

}, false);