Drag and Drop

HTML5 Drag n Drop - MOVE

HTML

<div id="leftBox" class="container"                       
               ondragstart="startDragging(event)"
               ondragenter="enterDropzone(event)" 
               ondragleave="exitDropzone(event)" 
               ondragover="dragInDropzone(event)" 
               ondrop="dropDraggedObject(event)">
    <div id="heading1" class="head">Intestazione 1</div>
    <div id="heading1node1" class="node" draggable="true">Nodo 1.1</div>
    <div id="heading1node2" class="node" draggable="true">Nodo 1.2</div>
        
    <div id="heading2" class="head">Intestazione 2</div>
    <div id="heading2node1" class="node" draggable="true">Nodo 2.1</div>
    <div id="heading2node2" class="node" draggable="true">Nodo 2.2</div>
    <div id="heading2node3" class="node" draggable="true">Nodo 2.3</div>
</div><!-- 
--><div id="rightBox" class="container" 
                   dropzone="move s:text"
                   ondragstart="startDragging(event)"
                   ondragenter="enterDropzone(event)" 
                   ondragleave="exitDropzone(event)" 
                   ondragover="dragInDropzone(event)" 
                   ondrop="dropDraggedObject(event)"> 
</div>

CSS

body {
    background-color: #eee;
}
div[draggable="true"] {
    cursor: move;
    cursor: -moz-grab;
    transition: all 0.3s ease;
}
div[draggable="true"]:hover {
    transition: all 0.3s ease;
    transform: scale(1.05);
    box-shadow: 0 0 5px royalBlue;
}
div.container {
    vertical-align: top;
    height: 300px;
    margin: 10px;
    padding: 10px;
    display: inline-block;
    width: calc(50% - 43px);
    border: 1px solid silver;
    background: white;
    overflow-y: auto;
}
div.head {
    padding: 5px;
    border: 1px solid dodgerBlue;
    background-color: cornflowerBlue;
    border-radius: 5px 0px 0px 5px
}
div.node {
    padding: 5px;
    border: 1px solid darkkhaki;
    background-color: khaki;
    margin-left: 5px;
    border-radius: 5px 0px 0px 5px
}

JavaScript

startDragging = function (e) {
    console.log("-----> Start Dragging");
    e.dataTransfer.setData('text/html', e.target.outerHTML);
    e.dataTransfer.effectAllowed = 'move';
}

enterDropzone = function (e) {
    if (isNotDropZoneContent()){
        console.log("-----> Enter DropZone");
        e.target.style.backgroundColor = "lavender";
        e.preventDefault();
    }
}

exitDropzone = function (e) {
    console.log("-----> Exit DropZone");
    e.target.style.backgroundColor = "white";
}

dragInDropzone = function (e) {
    console.log("-----> Drag in DropZone");
    e.dataTransfer.dropEffect = 'move';
    e.preventDefault();
}

dropDraggedObject = function (e) {    
    console.log("-----> Drop the dragged object ");
    var obj = e.dataTransfer.getData('text/html'); console.log(e.target.id);
    e.target.innerHTML += obj;
    e.target.style.backgroundColor = "white";
    e.preventDefault();
    e.stopPropagation();
}