时间戳

首页 > 解决方案 > Dragula 禁用拖动以重新排序

dragula - Dragula 禁用拖动以重新排序

问题描述

我正在使用这个很棒的库来实现拖放功能。Dragula非常擅长拖放。

我想做的一件事是禁用拖动以在自己的容器中重新排序。但如果要放入已连接/链接的容器中，则应允许拖动。

例如以下两个 div 标签作为容器

<div dragula="dropContainer" id="dropbag1" [(dragulaModel)]="bagOneModel">
   <div *ngFor="let model of bagOneModel" class="col-sm-2 col-md-2 col-lg-2">
     {{model}}
   </div>
</div>


<div dragula="dropContainer" id="dropbag2" [(dragulaModel)]="bag2Model">
   <div *ngFor="let model of bag2Model" class="col-sm-2 col-md-2 col-lg-2">
     {{model}}
    <!-- don't allow re ordering in this container -->
   </div>
</div>

标签： dragulang2-dragula

解决方案

创建允许拖动的东西非常容易：

  • 从 A 到 B
  • 从 B 到 A 并禁用
  • 在 A 内重新排序
  • 在 B 内重新排序

在你的name.component.ts你应该添加：

constructor(public dragulaService: DragulaService) {

    dragulaService.createGroup('dropContainer', {
        accepts: (el, target, source, sibling): boolean => {
            if (!target || !source || (target === source)) {
                 return false;
            }
            return true;
        }    
    });
}

推荐阅读