Drag and drop Image via JS/Jquery

by 0joker01

HTML

<div id="wrapper">
  Drop here your image
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#wrapper {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
  height: 200px;
}
#wrapper img {
  max-width: 100%;
}

JavaScript

$("#wrapper").on("dragenter dragexit dragover", disable);
      $("#wrapper").on('drop', drop);
      
      function disable(evt) {
        evt.stopPropagation();
        evt.preventDefault();
      }
      
      function drop(evt) {
        evt.stopPropagation();
        evt.preventDefault(); 
        var droppedObject = $('<div>').html(evt.originalEvent.dataTransfer.getData("text/html"));
        var image = droppedObject.find("img");
        if(image != undefined && image.length > 0){
          console.log(image);
          var imageUrl = image.attr('src');
          if(imageUrl != undefined)
            evt.currentTarget.innerHTML = "<img src=\"" + imageUrl + "\" />";
        } else {
          console.log("image undefined");
        }
      }