在 Kendo 网格上创建拖动提示的最佳方式

Question

我有一个 Angular-Kendo treeview 和一个 Kendo grid。当我 drag 一个 treeivew 项目时，我正在 Kendo 网格上创建一个 drag hint。

以下是我的观点：http://plnkr.co/edit/55MdA3NajWtNYUIYNXGr?p=preview

我在网格上有一个隐藏的叠加层 div，我会在需要时制作 visible。例如，$('.section-top-right .drop-zone').css('visibility', 'visible');

例如：

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>

** 两个主要问题：

1) 在 drag 事件中，我在打开 k-add Kendo 鼠标提示时遇到问题。 "+" only 图标只亮了一秒钟，然后又熄灭了。

我正在使用 $.contains 来确保用户将鼠标悬停在 #dropAreadimen 上：

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

2) 如何动态地使我的 drop-zone 的 height 始终适合网格的高度。

我的问题在这里：plunk。注意：请展开上面的树视图，并拖动任何叶项以查看当前拖动提示。

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

Answer 1

我能够通过以下方式解决我的问题：

添加隐藏 div 装饰 drop-zone class.
在树视图 drag 事件中，我使用 jQuery 显示 drop-zone div 并调整高度和宽度。
在 treeview drop 事件中，我只是将 div hidden.
在 drag 事件中，我还使用 e.dropTarget.className 检查鼠标悬停的位置（这允许我打开 k-add 拖动提示。

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>

在 Kendo 网格上创建拖动提示的最佳方式

Best way to create a drag hint over a Kendo grid

css

kendo-treeview

kendo-grid