2017-03-13 6 views
0

はここに私のcomponent.htmlDragulaドラッグは

<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クラスを持つ要素だけを切り替えるオプションはありますか?..これまでのところ、私はaccepts/invalidオプションがトリックを行うと思っていましたが、そうは思われません。 【class.sortable] = "photo.sortable" を使用し、[クラス名] = "のCssClass(写真)"

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

.htmlの.TSはファイルを使用して

答えて

0

Insted

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を作成し動作していない場合。

関連する問題