PrimeNG- p-draggable-enter 类不起作用答案

【问题标题】：PrimeNG- p-draggable-enter class not workingPrimeNG- p-draggable-enter 类不起作用
【发布时间】：2022-03-14 13:34:12
【问题描述】：

我的Angular Component 项目上有以下listbox，这是一个带有pDraggable 和pDroppable 方法的可排序列表：

<p-listbox [options]="listsOptions">
   <ng-template let-ratecard let-index="index" pTemplate="item">
      <div pDraggable="optionDrag" pDroppable="optionDrag" (onDragStart)="onDragStart(index)" (onDrop)="onDrop(index)" (onDrag)="onDrag($event, index)">
       <span class="option-class">{{option.Name}}</span>
         </div>
        </ng-template>
 </p-listbox>

我的问题是，当拖动时，我需要为每个项目列表添加悬停效果。

文档中提到了一个 p-draggable-enter 类来添加对可放置区域的任何效果，在我的例子中是列表中的任何项目。

我的问题是这个类没有做任何改变。

我在 .css 文件中添加了以下内容：

.p-draggable-enter {
  background: red !important;
}

我没有看到任何变化。

有什么想法吗？

【问题讨论】：

你能让它工作吗？我也面临同样的问题

标签： angular angular7 primeng

【解决方案1】：

您必须首先在您的 pDroppable 项目上设置一个自定义类，例如drop-column:

<div class="col-12 md:col-6 drop-column" pDroppable="products" (onDrop)="drop()">
  ...

然后，像这样设置 CSS：

.drop-column {
    border: 1px solid transparent;
    transition: border-color .2s;

    &.p-draggable-enter {
      border-color: var(--primary-color); 
    }
}

这将在项目进入可放置项时更改边框颜色。

从'Source' tab on Drag & Drop documentation 示例中提取的代码。

【讨论】：