Hello Reader's if you want to use drag and drop feature in website then you can use the code as below:- First create file drag.html and paste the following code in it.

<img id="source" src="../files/images/yourimage.jpg" draggable="true"
ondragstart="drag(event)" width="557" height="326">

Now create the script in header section of the file

<script>
function allowDrop(ev) {
    ev.preventDefault();
}    
function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}    
function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>

When you run this page the page will show two div, first div will show your image and another will be blank. But when you select your image and try to drag into another div your image will move to second div and first div will be empty now. It's very easy and simple example to see the drag and drop feature.

PS don't forgot give image file location at the html page.