RowMarker test for hover and events

by Ben Clayton

HTML

<table>
  <tr class="listing-dropmarker dropmarker  ddtarget newitem" data-rowindex="0" data-dd="ddnewrow">
    <td colspan="9">
      <div class="dropmarker-inner">
      </div>
    </td>
  </tr>
  <tr class="row" data-rowindex="0" data-dd="ddnewrow" draggable=true>
    <td colspan="9">
      <div class="inner">
      </div>
    </td>
  </tr>
  <tr class="listing-dropmarker dropmarker  ddtarget newitem" data-rowindex="0" data-dd="ddnewrow">
    <td colspan="9">
      <div class="dropmarker-inner">
      </div>
    </td>
  </tr>
  <tr class="row" data-rowindex="1" data-dd="ddnewrow" draggable=true>
    <td colspan="9">
      <div class="inner">
      </div>
    </td>
  </tr>
</table>


<div class="state">Enter</div>

CSS

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


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

.dropmarker {
  height: 10px;
  background-color: rgba(255,0,0,0.1);
  
}
.dropmarker-inner {
  position: relative;
}

.dropmarker-inner::before {
    height: 30px;
    width: 80%;
    content: '';
    background-color: rgba(86, 158, 58, 0.3);
    border-radius: 18px;
    display: block;
    position: absolute;
    left: 10%;
    z-index: 2;
    top: -14px;
    -webkit-transition: all 0.25s;
    transition: all 0.25s ease;
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}


.dropmarker-inner:hover::before {
  background-color: rgba(186, 158, 58, 1);
}

.row .inner {
   height:50px;
   background-color: rgba(200,200,100,0.2);
 }

JavaScript

$(document).ready(function() {

  $(document).on('dragenter', '.dropmarker', function(e) {
    e.stopPropagation();
    $(this).addClass('dragover');
    $(".state").addClass('dragover');
  });
  $(document).on('dragleave', '.dropmarker', function(e) {
    e.stopPropagation();
    $(this).removeClass('dragover');
     $(".state").removeClass('dragover');
  });

});