title: Best way to create a drag hint over a Kendo grid
body: <p>I have an Angular-Kendo <code>treeview</code> alongside a Kendo <code>grid</code>. When I <code>drag</code> a treeivew item, I'm creating a <code>drag hint</code> over the Kendo grid.</p>
  
  <p>Here is my plunk: <a href="http://plnkr.co/edit/55MdA3NajWtNYUIYNXGr?p=preview" rel="nofollow">http://plnkr.co/edit/55MdA3NajWtNYUIYNXGr?p=preview</a> </p>
  
  <p>I have a hidden overlay <code>div</code> over the grid, which I make <code>visible</code> when needed. For example, <code>$('.section-top-right .drop-zone').css('visibility', 'visible');</code></p>
  
  <p>For example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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');                    
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;style scoped&gt;
         .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;
      }
  &lt;/style&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>** Two main problems:</p>
  
  <p>1) On the <code>drag</code> event, I'm having issues turning on the <code>k-add</code> Kendo mouse hint. The <code>"+"</code> only icon only turns on for a second, but off again.</p>
  
  <p>I'm using <code>$.contains</code> to ensure the user is hovering over <code>#dropAreadimen</code> :</p>
  
  <pre><code>     if ($.contains($('#dropAreaDimen')[0], e.dropTarget)) {
                  e.setStatusClass("k-add");
              }
              else {
                  e.setStatusClass('k-denied');
              }
  </code></pre>
  
  <p>2) How to dynamically make the <code>height</code> of my <code>drop-zone</code> always fit the height of the grid.</p>
  
  <p>My plunk is here: <a href="http://plnkr.co/edit/55MdA3NajWtNYUIYNXGr?p=preview" rel="nofollow">plunk</a> . NB: Please expand the treeview above, and drag any leaf item to see the current drag hint.</p>
  
  <p>****** UPDATE *********
  <code>I solved it, and will post my solution shortly.</code></p>