代码之家 › 专栏 › 技术社区 › Sudarshana Dayananda

如何将拖放功能限制为角度ui树中的同级元素?

angular-ui-tree angularjs

Sudarshana Dayananda · 技术社区 · 6 年前

我曾经 this git存储库。

HTML格式

<div ui-tree="treeOptions" id="tree-root" data-drag-enabled="true">
    <ol ui-tree-nodes ng-model="nodes">
        <li ng-repeat="node in nodes"  
            ui-tree-node 
            data-type="top-level" 
            ng-include="'nodes_renderer.html'"></li>
    </ol>
</div>

我想将拖放功能限制为仅同级元素。

JS公司

$scope.treeOptions = {

    accept: function (sourceNodeScope, destNodesScope, destIndex) {

        if (sourceNodeScope.$parent.$id === destNodesScope.$parent.$id)
            return true;
        else
            return false;

    }
}

我在GitHub存储库中找不到关于这个需求的更多信息。

1 回复 | 直到 6 年前

james00794 6 年前

您的逻辑基本上是正确的,但是您使用的回调并不正确。有角度的ui树有 beforeDrop 回调,允许您返回一个承诺,并根据结果,将接受或拒绝丢弃。这个 accept 回调实际上是在每次跨越另一个节点时拖动时调用的。下面是一个简单的示例实现:

$scope.treeOptions = {
        beforeDrop : function (e) {
          if (e.source.nodesScope.$parent.$id === e.dest.nodesScope.$parent.$id) {
            console.log("siblings, this is allowed");
            return $q.resolve();
          }
          else {
            console.log("not siblings");
            window.alert("Not siblings! Reject this drop!");
            return $q.reject();
          }
        }
     };

下面是一个简单的例子: http://plnkr.co/edit/6PD6PrD3wRduOjOQzuFN

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

3 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

3 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

3 年前

jieunbi · 按日期排序数组(最新优先)

3 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

3 年前

Stradosphere · 如何防止ng bind html添加结束标记?

7 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

7 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

7 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

7 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

7 年前