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”使用 [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** 
}

<强> DragulaService

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

如果仍然无法创建plunker。

Dragula只拖动想要的元素

1 个答案: