Drag & Drop

Drag & Drop using HTML5 javascript

by Shishir Morshed

HTML

<div id="one"><img id="img_one" src="http://img.gettyimageslatam.com/public/userfiles/redesign/images/landing/home/img_entry_002.jpg" alt="" draggable="true"></div>
    <div id="two"></div>

CSS

div{width: 300px; height: 150px; border: 1px solid #ccc; float: left; margin: 20px;}
div.over { border: 2px dashed #666}
div.dropped { animation: drop_animation 1s ease 0 1 normal; -webkit-animation: drop_animation 1s ease 0 1 normal;}
div img {width: 100%;}

@keyframes drop_animation {
    0% {
        box-shadow:0 0 1px #000
    }
    
    50% {
        box-shadow:0 0 20px #000
    }
    
    100% {
        box-shadow:0 0 1px #000
    }
}
@-webkit-keyframes drop_animation {
    0% {
        -webkit-box-shadow:0 0 1px #000;
    }
    
    50% {
        -webkit-box-shadow:0 0 20px #000;
    }
    
    100% {
        -webkit-box-shadow:0 0 1px #000;
    }
}

JavaScript

var divs = document.querySelectorAll('div');

var dragStartHandler = function(event){
    event.dataTransfer.setData("text", event.target.id);
};

var dragEnterHandler = function(event){
    this.classList.add('over');
}

var dragLeaveHandler = function(event){
    this.classList.remove('over');
}

var dragOverHandler = function(event){
    if( event.preventDefault()){
        event.preventDefault();
    }
};

var dropHandler = function(event){
    if( event.preventDefault()){
        event.preventDefault();
    }
    event.target.appendChild(document.getElementById(event.dataTransfer.getData("text")));
    
    
    [].forEach.call(divs, function(div){
        div.classList.remove('dropped');
    });
    this.classList.add('dropped');
};

var dragEndHandler = function(event){
    this.classList.remove('over');
};



document.querySelector('img').addEventListener('dragstart', dragStartHandler);




[].forEach.call(divs, function(div){
    div.addEventListener('drop', dropHandler);
    div.addEventListener('dragover', dragOverHandler);
    div.addEventListener('dragenter', dragEnterHandler);
    div.addEventListener('dragleave', dragLeaveHandler);
    div.addEventListener('dragend', dragEndHandler);
})