Wie sich aus der Addition dragover- Klasse Angular ng-f-Upload Dropzone

Question

Angular DND-Liste ziehbar Element verhindern Ich bin mit Angular Drag-and-Drop-Listen see here mit kantigem ng-Datei-Upload see here

Problem:

Wenn ich den Listeneintrag neu anordnen, wenn ich den Mauszeiger über den Textbereich halte (Upload-Dropzone ng-file), wird die Dragover-Klasse zur Dropzone hinzugefügt.

Wie kann ich das ziehbar Element von DND-Liste verhindern, dass das Auslösen des Drag über die ng-Datei-Upload-Dropzone

Beispielcode

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<ul dnd-list dnd-drop=""> 
 
    <li ng-repeat="item in list" 
 
     dnd-draggable="null" 
 
     dnd-callback="onDrop()"> 
 
     {{item.title}} 
 
    </li> 
 
    </ul> 
 

 
<div ngf-drop="uploadMe($files,list.id)" 
 
ngf-drag-over-class="'dragover'" 
 
ngf-multiple="true" 
 
ngf-drag-over-class="{accept:'fileDragOver', reject:'textDragOver'}"> 
 
    <textarea class="form-control" ng-model="chatbox"></textarea> 
 
</div>

Answer 1

Für diese Sie‘ ve zu verwenden dnd-type = "xxx" wo dnd-erlaubt-types entscheidet, welche Art von Artikel fallen gelassen werden soll.

<ul dnd-list="containers" 
dnd-allowed-types="['container']" 
dnd-external-sources="true" 
dnd-dragover="dragoverCallback(index, external, type, callback)" 
dnd-drop="dropCallback(index, item, external, type)"> 
<li ng-repeat="container in containers" 
    dnd-draggable="container" 
    dnd-type="'container'" 
    dnd-effect-allowed="copyMove" 
    dnd-moved="containers.splice($index, 1)" 
    dnd-callback="container.items.length"> 
    <div class="container-element box box-blue"> 
     <h3>Container (effects allowed: {{container.effectAllowed}})</h3> 
     <ul dnd-list="container.items" 
      dnd-allowed-types="['item']" 
      dnd-horizontal-list="true" 
      dnd-external-sources="true" 
      dnd-effect-allowed="{{container.effectAllowed}}" 
      dnd-dragover="dragoverCallback(index, external, type)" 
      dnd-drop="dropCallback(index, item, external, type)" 
      dnd-inserted="logListEvent('inserted at', index, external, type)" 
      class="itemlist"> 
      <li ng-repeat="item in container.items" 
       dnd-draggable="item" 
       dnd-type="'item'" 
       dnd-effect-allowed="{{item.effectAllowed}}" 
       dnd-dragstart="logEvent('Started to drag an item')" 
       dnd-moved="container.items.splice($index, 1)" 
       dnd-dragend="logEvent('Drag operation ended. Drop effect: ' + dropEffect)"> 
       {{item.label}} 
      </li> 
     </ul> 
     <div class="clearfix"></div> 
    </div> 
</li> 

Beispiel demo