Question

我有一个Angular-Kendo treeview和剑道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鼠标提示时遇到问题。仅"+"图标仅会打开一秒钟，但会再次关闭。

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

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

2）如何动态地使height的{{1}}始终符合网格的高度。

我的插件在这里：plunk。注意：请展开上面的树视图，然后拖动任何叶子项目以查看当前拖动提示。

******更新********* drop-zone

Answer 1

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

添加一个用drop-zone类装饰的隐藏div。
在treeview drag事件中，我使用jQuery显示drop-zone div并调整高度和宽度。
在树视图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网格上创建拖动提示的最佳方法

1 个答案: