Dragula 드래그은

Question

가 여기 내 component.html

<div class="row" [dragula]='"photos-bag"' [dragulaModel]='photos'> 
    <div *ngFor="let photo of photos" [class.sortable]="photo.sortable"> 
     <a href="#" class="thumbnail" > 
      <img src="http://placehold.it/140.png" > 
     </a> 
     {{ photo.name }} 
    </div>                                                  
</div> 

이며, 여기에 드래그 할 수있는 요소를 설정 내 component.ts의 일부 요소를 원

dragulaService.setOptions('photos-bag', { 
    moves: function(el, source, handle, sibling) { 
      return el.classList.contains('sortable'); 
     }, 
}); 

이제 여기에 문제가 .. sortable 클래스가있는 요소 만 전환 할 수있는 옵션이 있습니까? .. 지금까지는 인수/잘못된 옵션이 트릭을 수행 할 것으로 생각했지만 그렇지 않았습니다.

Answer 1

Insted 이용하여 class.sortable] = "photo.sortable"는 [클래스 명 = "cssClass (사진)"

.html 중에서

<div class="row" [dragula]='"photos-bag"' [dragulaModel]='photos'> 
    <div *ngFor="let photo of photos" [className]="cssClass(photo)> 
     <a href="#" class="thumbnail" > 
      <img src="" > 
     </a> 
     {{ photo.name }} 
    </div>                                                  
</div> 

.TS가 파일 사용

cssClass(photo){ 
    // based on condition return "draggable CSS" or **Non draggable CSS** 
} 

DragulaService

dragulaService.setOptions('photos-bag', { 
    moves: function(el, source, handle, sibling) { 
      return el.className === "draggableCSS"?true:false 
     }, 
}); 

여전히 작동하지 않으면 plunker를 만듭니다.