Popup by mouse drag drop files event

Used to show file upload progress for multiple files;

by Ben Clayton

HTML

<div class="dragme one" data-dd draggable=true>Drag Me</div>
<div class="dragme two" data-dd draggable=true>Drag Me</div>

CSS

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

.dragme {
    position:fixed;
    border: 1px solid red;
    padding: 5px;
}

.dragme.one {
  left: 10%;
  top: 10%;
}

.dragme.two {
  bottom: 10%;
  right: 10%;
}
.upload-status {
  position:absolute;
  z-index: 2;
  background-color: rgba(10, 10, 10, 1);
  border-radius: 10px;
  padding: 10px;
  width: 20vw;
  border: 1px solid rgba(10, 10, 10, 0.4);
  min-width: 100px;
}

.upload-status .progressbar {
  display: inline-block;
  width: calc(100% - 48px);
  background-color: rgba(40,40,40,1);
  height: 12px;
}
.upload-status .bar {
  height: 100%;
  width: 0%;
  border-radius: 4px;
  background-color: rgba(40,200,40,1);
  font-size: 10px;
  text-align: center;
  transition: width 1s;
}

.upload-status .abort {
  width: 43px;
  display: inline-block;
  margin-left: 5px;
  clear: both;
  font-size:9px;
  text-transform: uppercase;
  border-radius: 6px;
  border: none;
  height: 12px;
  position: relative;
  top: -1px;
  outline: none;
  background-color: rgba(100,110,110,1);
}

JavaScript

function cmsEventHandler() {

	this.dragged = null;
	var self = this;


	this.initObjectEvents = function(){
		
		$(document)
			.on("dragstart", "[data-dd='ddnewitem']", function(ev) { // (not for external objects)
				self.dragged = this;
				ev.originalEvent.dataTransfer.dropEffect = "copy";

			}).on("dragstart", "[data-dd='ddrow']", function(ev) { // (not for external objects)
				self.dragged = this;
				$(this).addClass("dragging");
				ev.originalEvent.dataTransfer.dropEffect = "move";

			}).on("dragenter", ".ddtarget,.ddupload", function(ev) {
				ev.preventDefault();
				ev.stopPropagation();
				var el = ev.currentTarget;// always work on the TR.items
				el.mycnt = (el.mycnt) ? el.mycnt + 1 : 1;
				$('.dragover').removeClass('dragover');
				$(el).addClass('dragover');

			}).on("dragleave", ".ddtarget,.ddupload", function(ev) {
				ev.preventDefault();
				ev.stopPropagation();
				var el = ev.currentTarget;
				if ( el.mycnt > 0 ) el.mycnt--;
				if (el.mycnt == 0) $(el).removeClass('dragover');

			}).on("dragover", '.ddtarget,.ddupload', function(ev) {
				ev.preventDefault(); // MUST BE HERE TO STOP BROWSER DEFAULT ACTION ON DROP

			}).on("dragend", "[data-dd]", function(ev) { // This happens last even after Drop. (not for external objects)
				$(self.dragged).attr("draggable",false).removeClass('dragging');
				$('body')[0].mycnt=0;
				self.dragged = null;

			// you might have a ddimage inside a ddrow, so if you drop on ddimage make sure 
			//   events does not bubble up to ddrow by using stopPropagation()
			}).on("drop", "[data-dd]", function(ev) {
				ev.preventDefault();
				ev.stopPropagation();
				$(this).removeClass('dragover');
				self.drop(ev,this,self.dragged.dataset.dd);

			});
	}
  
	this.initBodyEvents = function(){
		$('body')
			.on('dragstart', function(ev) {
				//ev.preventDefault(); ! Put this in and it stops internal draggable items from dragging
			})
			.on('dragover', function(ev) {
				ev.preventDefault(); //...