如何使用免打擾列表（JavaScript的/角），以限制「搬家」到一定的div

我使用「拖放&下拉列表」（http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/simple）。如何使用免打擾列表（JavaScript的/角），以限制「搬家」到一定的div

的默認行爲是一個click'n'drag一個<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，和如果我點擊body div，則什麼都不會發生。

（之所以這樣，是在我的實際項目，我在<li>了編輯框，如果你點擊編輯框並拖動來選擇你最終移動整個<li>編輯框中的內容 - 一個糟糕的用戶體驗！）

來源

2016-11-16 SAL

找到了答案......這是在該項目的github上的註釋。屬性DND-nodrag添加到周圍的實際內容的新的div並添加屬性DND-手柄theheader格，從而

<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

如何使用免打擾列表（JavaScript的/角），以限制「搬家」到一定的div

回答

相關問題