如何使用 dnd-list (javascript/angular) 将“移动”限制为某些 div答案

【问题标题】：How to restrict 'move' to certain divs using dnd-list (javascript/angular)如何使用 dnd-list (javascript/angular) 将“移动”限制为某些 div
【发布时间】：2016-11-16 11:26:11
【问题描述】：

我正在使用“拖放列表”(http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/simple)。

默认行为是单击并拖动<li> 元素上的任意位置会导致<li> 移动。

有没有办法限制这种行为，以便用户需要点击<li> 的特定子元素？

我设置了一个 plunkr (http://plnkr.co/edit/6mOkqRuY4aXY3NUE5W7F?p=preview)，其中每个 <li> 包含两个 div，因此：

   <ul dnd-list="models.lists.A">
    <li ng-repeat="item in models.lists.A"
        dnd-draggable="item"
        dnd-moved="models.lists.A.splice($index, 1)"
        dnd-effect-allowed="move"
        dnd-selected="models.selected = item"
        ng-class="{'selected': models.selected === item}">
      <div class="theheader">A header</div>
      <div class="thebody">{{item.label}}</div>
    </li>
</ul>

我想将 click'n'drag 行为仅限于 theheader div，如果我单击 thebody div，则不会发生任何事情。

（原因是在我的实际项目中，我在<li> 中有编辑框，如果您单击编辑框并拖动以选择编辑框内容，您最终会移动整个<li> -糟糕的用户体验！）

【问题讨论】：

标签： javascript angularjs drag-and-drop

【解决方案1】：

找到答案...在项目的 github 注释中。将属性 dnd-nodrag 添加到围绕实际内容的新 div 并将属性 dnd-handle 添加到标题 div，因此

<body class="simpleDemo" ng-controller="SimpleDemoController">
<ul dnd-list="models.lists.A">
    <li ng-repeat="item in models.lists.A"
        dnd-draggable="item"
        dnd-moved="models.lists.A.splice($index, 1)"
        dnd-effect-allowed="move"
        dnd-selected="models.selected = item"
        ng-class="{'selected': models.selected === item}">
      <div dnd-nodrag>
        <div class="theheader" dnd-handle>A header</div>
        <div class="thebody">Body for {{item.label}}</div>
      </div>
    </li>
</ul>
</body>

请戳这里：http://plnkr.co/edit/TI1wjkkurrAVNAiutyU4?p=preview

现在拖动蓝色标题会移动<li>，拖动到其他任何地方都不会...

【讨论】：