dnd-list（javascript/angular）を使用して特定のdivに移動を制限する方法

私は 'ドラッグ&ドロップリスト'（http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/simple）を使用しています。dnd-list（javascript/angular）を使用して特定のdivに移動を制限する方法

デフォルトの動作では、<li>要素のどこにでもクリックをドラッグすると、<li>が移動します。

ユーザーが<li>の特定のサブ要素をクリックする必要があるようにその動作を制限する方法はありますか？

<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>

は私がtheheaderのdivだけにclick'n'dragの行動を制限したい、と：

私はこのように、各<li> 2つのdiv要素が含まれていplunkr（http://plnkr.co/edit/6mOkqRuY4aXY3NUE5W7F?p=preview）を設定しましたthebody divをクリックすると、何も起こりません。

（私の実際のプロジェクトでは<li>の編集ボックスがあります。編集ボックスをクリックして、編集ボックスの内容をドラッグして移動すると、<li> - 悪いユーザー経験！）

出典

2016-11-16 SAL

答えを見つけました...プロジェクトのgithubノートにあります。実際のコンテンツを取り巻く新しいdiv要素に属性DND-nodragを追加し、属性DND-ハンドルを追加するtheheaderの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>

Plunkrここ：http://plnkr.co/edit/TI1wjkkurrAVNAiutyU4?p=preview

今<li>を移動する青いヘッダーをドラッグします、他の場所にドラッグすると何もしません。

出典

2016-11-17 13:05:08 SAL

dnd-list（javascript/angular）を使用して特定のdivに移動を制限する方法

答えて

関連する問題