Check Drag Enter Leave with table

by Ben Clayton

HTML

<div class="wrapper">
<div class="newitem" draggable=true data-dd='ddnewitem'> Drag Me </div>
<div class="newitem" > NO DRAG </div>

<table cellspacing=0 cellpadding=0>
<tr class="ddtarget"><td colspan=3><div></div></td></tr>
<tr class="ddupload ddsource" data-dd="ddrow"><td><div class="picture"></div></td><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr class="ddtarget"><td colspan=3><div></div></td></tr>
<tr class="ddupload ddsource" data-dd="ddrow"><td><div class="picture"></div></td><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr class="ddtarget"><td colspan=3><div></div></td></tr>
<tr class="ddupload ddsource" data-dd="ddrow"><td><div class="picture"></div></td><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr class="ddtarget"><td colspan=3><div></div></td></tr>
<tr class="ddupload ddsource" data-dd="ddrow"><td><div class="picture"></div></td><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr class="ddtarget"><td colspan=3><div></div></td></tr>
</table>
</div>

CSS

body {
  padding: 0;
  margin: 0;
}

.wrapper {
  height: 100vh;
}

.newitem {
  border: 1px solid red;
  width: 70px;
}

table {
  width: 80%;
  margin: 30px;
}

td {
  line-height: 1px;
}

.ddsource td {
  border: 1px solid red;
}


tr.ddtarget,
tr.ddtarget td {
  height: 5px;
}

tr.ddsource {
  height: 20px;
}

tr.ddtarget div {
  position: relative;
  height: 4px;
  border-radius: 5px;
}

tr.ddtarget div::before {
  content: ' ';
  display: block;
  height: 0px;
  width: 100%;
  opacity: 0.9;
  position: absolute;
  top: 0px;
  border-radius: 5px;

}

.dragging-ddrow tr.ddtarget div {
  background-color: rgba(255, 200, 200, 0.8);
}
.dragging-ddfile tr.ddtarget div {
  background-color: rgba(200, 200, 255, 0.8);
}

.dragging-ddnewitem tr.ddtarget div {
  background-color: rgba(200, 255, 200, 0.8);
}

.dragging-ddrow tr.ddtarget div::before,
.dragging-ddfile tr.ddtarget div::before,
.dragging-ddnewitem tr.ddtarget div::before {
  height: 15px;
  top: -6px;
}


.dragging-ddrow tr.ddtarget.dragover div,
.dragging-ddfile tr.ddtarget.dragover div,
.dragging-ddnewitem tr.ddtarget.dragover div {
  background-color: rgba(200, 255, 200, 0);
}


.dragging-ddrow tr.ddtarget.dragover div::before {
  background-color: rgba(255, 200, 200, 1);
  height: 15px;
  top: -6px;
}

.dragging-ddfile tr.ddtarget.dragover div::before {
  background-color: rgba(200, 200, 255, 1);
  height: 15px;
  top: -6px;
}

.dragging-ddnewitem tr.ddtarget.dragover div::before {
  background-color: rgba(200, 255, 200, 1);
  height: 15px;
  top: -7px;
}



.picture {
  height: 25px;
}

.dragging-ddfile tr .picture {
  background-color: rgba(200, 200, 255, 0.4);
}

.dragging-ddfile tr.dragover .picture {
  background-color: rgba(200, 200, 255, 1);
}

JavaScript

$(document).ready(function() {

  var dragged = null;

  console.log("init")
  $(".ddsource").attr("draggable", true);
  
  $(document).on("dragstart", ".newitem", function(ev) {
    console.log(".newitem dragstart")
    dragged = this;
    ev.originalEvent.dataTransfer.dropEffect="copy";
  }).on("dragstart", ".ddsource", function(ev) {
    console.log(".ddsource dragstart");
    dragged = this;
    ev.originalEvent.dataTransfer.dropEffect = "move";
  }).on("dragenter", ".ddtarget,.ddupload", function(ev) {
    ev.preventDefault();
    //ev.stopPropagation();
    this.mycnt = (this.mycnt) ? this.mycnt + 1 : 1;
    //debugger;
    console.log("dragenter ==", ev.target.tagName, this.tagName, this.mycnt);
    $('.dragover').removeClass('dragover');
    $(this).addClass('dragover');
  }).on("dragleave", ".ddtarget,.ddupload", function(ev) {
    ev.preventDefault();
    //ev.stopPropagation();
    if(this.mycnt>0)this.mycnt--;
    console.log("dragleave ==", ev.target.tagName, this.tagName, this.mycnt);
    if (this.mycnt == 0) $(this).removeClass('dragover');
  }).on("dragover", '.ddtarget,.ddupload', function(ev) {
    ev.preventDefault(); // MUST BE HERE TO STOP DEFAULT ACTION ON DROP
    //ev.stopPropagation();
  }).on("dragend", '.newitem', function(ev) {
    console.log(".newitem dragend");
    //var nm = 'dragging-' + dragged.dataset.dd;
    //$('body').removeClass(nm);
    dragged = null;
    $('body')[0].mycnt=0;
  }).on("dragend", '.ddsource', function(ev) {
    console.log(".ddsource dragend");
    //var nm = 'dragging-' + dragged.dataset.dd;
    //$('body').removeClass(nm);
    dragged = null;
    $('body')[0].mycnt=0;
  }).on("drop", '.ddtarget', function(ev) {
    ev.preventDefault();
    console.log(".ddtarget drop", dragged);
    $(this).removeClass('dragover');
    //var nm = 'dragging-' + dragged.dataset.dd;
    //$('body').removeClass(nm);
    ddDropItem(ev, dragged.dataset.dd, "dropmarker")
  }).on("drop", '.ddupload', function(ev) {
   ...