Best way to create a drag hint over a Kendo grid

Question

I have an Angular-Kendo treeview alongside a Kendo grid. When I drag a treeivew item, I'm creating a drag hint over the Kendo grid.

Here is my plunk: http://plnkr.co/edit/55MdA3NajWtNYUIYNXGr?p=preview

I have a hidden overlay div over the grid, which I make visible when needed. For example, $('.section-top-right .drop-zone').css('visibility', 'visible');

For example:

drag: function (e) {

  // DROP ZONE DIV
  $('.section-top-right .drop-zone').css('visibility', 'visible');    

  if ($.contains($('#dropAreaDimen')[0], e.dropTarget)) {     //make sure mouse is hovering the grid
    e.setStatusClass("k-add");
  }
  else {
     e.setStatusClass('k-denied');                    
  }
}

<style scoped>
       .drop-zone {
        color:crimson;
        visibility: hidden;
        border: 2px dashed;
        background-color: seashell;
        height: 200px;
        width: 720px;
        top: 400px;
        position: absolute;
        opacity: .5;
        z-index:10;
    }
    .drop-text {
        font-size: 16px;
        font-weight:bold;
        color: crimson;
        text-align:center;
    }
</style>

** Two main problems:

1) On the drag event, I'm having issues turning on the k-add Kendo mouse hint. The "+" only icon only turns on for a second, but off again.

I'm using $.contains to ensure the user is hovering over #dropAreadimen :

     if ($.contains($('#dropAreaDimen')[0], e.dropTarget)) {
                e.setStatusClass("k-add");
            }
            else {
                e.setStatusClass('k-denied');
            }

2) How to dynamically make the height of my drop-zone always fit the height of the grid.

My plunk is here: plunk . NB: Please expand the treeview above, and drag any leaf item to see the current drag hint.

****** UPDATE ********* I solved it, and will post my solution shortly.

Answer 1

I was able to solve my problem by :

1. Adding a hidden div decorated with a drop-zone class.
2. In the treeview drag event, I use jQuery to show the drop-zone div and also resize the height and width.
3. In the treeview drop event, I simply make the div hidden.
4. In the drag event, I also check where the mouse is hovering by using e.dropTarget.className (which allows me to turn on the k-add drag hint.

KENDO TREEVIEW OPTIONS
settings.treeOptions_DefRiskMsr = {
  checkboxes: false,
  template: kendo.template($("#treeview-template-riskmeasures").html()), 
  dataTextField: ["category", "name"],
  dragAndDrop: true, 
  drag: function (e) {

    // GET HEIGHT AND WIDTH OF KENDO GRID
    var h1 = $('#riskMsrGrid .k-grid-header').height();
    var h2 = $('#riskMsrGrid .k-grid-content').height();
    var w = $('#riskMsrGrid .k-grid-content').css('width');

    // DROP ZONE DIV
    $('.section-top-right .drop-zone').css('visibility', 'visible');
    $('.section-top-right .drop-zone').css('width', w);
    $('.section-top-right .drop-zone').css('height',h1+h2);


    if ((['drop-zone', 'drop-text']).indexOf(e.dropTarget.className) >= 0) {     // is mouse hovering grid area
      e.setStatusClass("k-add");
    }
    else {
      e.setStatusClass('k-denied');
    }                

  },
  drop: function (e) {
    e.preventDefault();     // removes the drag clue icon

    // DROP ZONE DIV
    $('.section-top-right .drop-zone').css('visibility', 'hidden');
    
    // add'l code omitted for brevity
  }
};

<style scoped>
.section-top-right .drop-zone {
        color:crimson;
        visibility: hidden;
        border: 2px dashed;
        background-color: seashell;
        height: 60px;
        width: 700px;
        top: 0px;
        position: absolute;
        opacity: .5;
        z-index:10;        
    }
    .section-top-right .drop-text {
        font-size: 14px;
        font-weight:bold;
        color: crimson;
        text-align:center;
        transform: rotate(345deg);
        margin-top: 20px;
    }
    .selection-grids > .k-grid-content { /* adds white space to bottom */
        min-height: 30px;
    }
</style>

<div class="col-md-12 col-lg-12">

  <!-- DROP HINT !!! -->
  <div id="dropAreaDimen" class="drop-zone">
    <div class="drop-text">DROP RISK MEASURES HERE</div>
  </div>

   <!-- GRID -->
  <span id="riskMsrGrid" class="selection-grids"
        kendo-grid="settings.userRiskMsrGrid" 
        k-data-source="settings.userRiskMsrGridDS"
        k-options="settings.riskMsrGridOptions" 
        k-rebind="settings.riskMsrGridOptions">
  </span>

</div>