Dragging stuff.

by Dlofud

HTML

<div id=container><div id="box0" draggable="true"><div>Drag This, and the "drag not allowed" cursor appears.
</div>
</div>
<div id="box1">
</div>
</div>

CSS

#box0 {
position: absolute;
background: green;
height: 100px;
width: 200px;
border: solid 2px;
}
#box1 {
position: absolute;
left: 250px;
background: yellow;
height: 100px;
width: 100px;
border: solid 1px;
}
#container {
position: relative;
background: grey;
height: 500px;
width: 500px;
}
.boxh {
display: none;
}
.nocursor {
cursor: none;
}

JavaScript

var box0 = document.getElementById('box0');

box0.addEventListener('dragstart', dragStart);
/*elemento.addEventListener('l'evento che interessa', la funzione da avviare*/

box0.addEventListener('dragend', dragend);
box0.addEventListener('dragenter', dragEnter);
box0.addEventListener('dragover', dragOver);
container.addEventListener('dragenter', dragEnter);
container.addEventListener('dragover', dragOver);
container.addEventListener('dragend', dragend);

function dragStart(e) {
    e.dataTransfer.setData('text/plain', e.target.id);
    setTimeout (() => {e.target.classList.add('boxh');}, 0);}
function dragend(e) {
    e.target.classList.remove('boxh');
}
function dragEnter(e) {
    e.preventDefault();
    }