Dropmarkers

by Ben Clayton

HTML

<div class="dropmarker">

</div>
<div class="block" draggable=true>
DRAG ME
</div>
<div class="dropmarker">

</div>
<div class="block half" draggable=true>
DRAG ME
</div>
<div class="dropmarker">

</div>
<div class="block">

</div>
<div class="dropmarker">

</div>

CSS

.block {
  background-color: rgba(250,230,200,0.9);
  height: 50px;
  padding: 20px;
}
.block.half{
  width: 50%;
}
.block.dragging {
  opacity: 0.8;
}
.dragger{
  display:block;
  position: absolute;
  top: -1000px;
  width: 88%;
  background-color: rgba(250,230,200,0.8)
}

.dropmarker {
  display: block;
  -webkit-transition: all 0.25s;
  transition: all 0.25s ease;
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
  height: 7px;
  background-color: rgba( 126,238, 86, 0);
  background-image: none;
  box-shadow: 0 0 0 rgba(243, 225, 18, 0);
  border-radius: 18px;
  position: relative;
  
}

body.dragging .dropmarker {
  background-color: rgba(100,250, 100, 0.4);
}

.dropmarker::before {
  height: 7px;
  width: 100%;
  content: '';
  background-color: rgba(100, 250, 100, 0);
  border-radius: 18px;
  display: block;
  position: absolute;
  z-index: 2;
  top: 0px;
    -webkit-transition: all 0.25s;
  transition: all 0.25s ease;
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}

body.dragging .dropmarker::before {
  height: 30px;
  top: -12px;
}
div.dropmarker.dragover::before {
  height: 30px;
  background-color: rgba(100, 250, 100, 0.7);
  top: -12px;
}

JavaScript

$(document).on('dragstart', 'body', function(event) {
	  $(this).addClass('dragging');
	  return true;
	});
	$(document).on('dragend', 'body,.block', function(event) {
	  $(this).removeClass('dragging');
	  return true;
	});
	$(document).on('dragstart', '.block', function(e) {
	  $(this).addClass('dragging');
	  console.log("---DIV----");
	  console.log("target", e.target);
	  /* e.stopPropagation(); */
    $('.dragger').remove();
	  dragghost = this.cloneNode(true);
    dragghost.classList.add("dragger");
	  document.body.appendChild(dragghost);
    dragghost.style.backgroundColor = "rgba(250,230,200,0.5)";
	  e.originalEvent.dataTransfer.setDragImage(dragghost, 0, 0);
	});




	$(document).on('dragover', '.dropmarker', function(event) {
	  event.preventDefault();
	  $(this).addClass('dragover');
	});

	$(document).on('dragleave drop', '.dropmarker', function(event) {
	  event.preventDefault();
	  $(this).removeClass('dragover');
	});