angular - Dragula Drag 只想要元素

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

使用 [class.sortable]="photo.sortable" 使用[className]="cssClass(photo)"

.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** 
}

Dragula服务

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

如果仍然无法正常工作，请创建 plunker。