- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 Angular Material 的 Drag and Drop 模块来移动一些元素。
更具体地说,我有多个 cdkDropList
,每个都有一个 cdkDrag
:
<div *ngFor="let l of lists">
<div cdkDropList [cdkDropListConnectedTo]="all_lists">
<div cdkDrag>
content
</div>
</div>
</div>
<div cdkDrag>
content
<div *cdkDragPlaceholder>
placeholder content
</div>
</div>
content
),并且只为源列表设置占位符。
cdkDrag
而不是
cdkDropList
的属性)。
最佳答案
如果我正确理解您的问题,您只想在拖动到另一个列表时显示自定义占位符,并在同一列表中拖动时显示默认值。
要检测源列表外的移动,您可以使用 cdkDragEntered
每当将项目从外部拖入列表时触发的事件。在 CdkDragEnter事件数据您拥有您输入的列表信息以及有关被拖动项目的所有信息。该项目包含它当前所属的列表的信息。这意味着当我们输入的列表与项目列表不同时,已经输入了另一个列表。获得此信息后,您可以根据此信息更改占位符内显示的内容。
我已将您的 StackBlitz 示例更改为这种方法。
组件代码:
export class CdkDragDropConnectedSortingGroupExample {
todo = [
'Get to work',
'Pick up groceries',
'Go home',
'Fall asleep'
];
done = [
'Get up',
'Brush teeth',
'Take a shower',
];
another = [
'Check e-mail',
'Walk dog'
]
lists = [this.todo, this.done, this.another];
public draggingOutsideSourceList: boolean = false;
drop(event: CdkDragDrop<string[]>) {
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
transferArrayItem(event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex);
}
this.draggingOutsideSourceList = false; // always reset after drag drop finishes
}
onCdkDragEntered(event: CdkDragEnter<string>) {
this.draggingOutsideSourceList = event.container !== event.item.dropContainer;
}
}
<div cdkDropListGroup>
<div class="example-container todoList" *ngFor="let list of lists">
<div cdkDropList [cdkDropListData]="list" class="example-list" (cdkDropListDropped)="drop($event)">
<div cdkDrag *ngFor="let item of list" (cdkDragEntered)="onCdkDragEntered($event)">
<ng-template #itemTpl>
<div class="example-box">{{item}}</div>
</ng-template>
<div *cdkDragPlaceholder>
<div *ngIf="draggingOutsideSourceList; else itemTpl" class="customPlaceHolder">
Custom placeholder content only in sink list
</div>
</div>
<ng-container *ngTemplateOutlet="itemTpl"></ng-container>
</div>
</div>
</div>
</div>
cdkDragEntered
通过设置
draggingOutsideSourceList
来确定拖动是在源列表外部还是内部的事件模板中使用的属性来选择在占位符中显示的内容。
关于angular - 如何为源和接收器下拉列表使用不同的 ckdDragPlaceholders?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62224019/
媒体存在于外部服务器上,我想在我的 Actor 接收器上播放该媒体( Google's CastReferencePlayer 的修改版本)。接收器与该服务器持续通信(通过长轮询),并在需要播放某个媒
我想将我的 PyQt4 应用程序移植到 PyQt5,但遇到了一个微妙的问题。 有时我会检查自定义 QThread 对象 (worker) 是否仍然连接了一些特定的信号,我在 PyQt4 中已经这样做了
假设我们有 n 台设备,n 为偶数。每个设备都可以作为发射器 (T) 或接收器 (R)。对于每个设备 i,我们都给定了 2 个数字,Ti 和 Ri。 Ti 是设备用作发射器时的成本,Ri 是设备用作接
我想在 android 中创建 airplay,其中我的 android 设备将用作 airplay 服务器(接收器),而 iPhone 设备将用作接收器。我在我的应用程序中使用了 jmdns,它是
简单问题 - 我可以将单个 BroadcastReceiver 注册到多个 Intent 操作吗?这是我正在考虑的: 所以在 myRecei
假设我在 2 个应用程序(应用程序 A 和应用程序 B)的 list 中有以下接收器: 在每个应用程序中,我想创建一个 PendingIntent(如果不存在
我正在尝试向接收方应用程序的关闭事件添加逻辑,但每次发送方断开连接时,调试器都会关闭并且不会执行任何逻辑(例如发送一些 HttpRequest)。我的一段代码: this.context.addEve
我们正在使用flume,我需要将一些日志消息收集到rabbitmq 中。我找到了一个来源 implementation从rabbitmq读取消息,但我找不到可以将消息写入rabbit的接收器。所以我想
我遇到了一个远程异常: “这个远程代理没有 channel 接收器,这意味着服务器没有注册的服务器 channel 正在监听,或者这个应用程序没有合适的客户端 channel 来与服务器通信。” th
我是 WebRTC 的新手,并试图弄清楚如何在浏览器之外创建一个程序,该程序接收 WebRTC 音频流并将其输出到扬声器上。 是否有适用于 Java 或 C# 的 WebRTC 库? 该接收器将在 l
我正在创建一个简单的 Spring Boot 应用程序,我想接收发送到 AMQP(Rabbit)交换(来自另一个应用程序)的消息。 我收到一条错误消息,指出我要接收的队列不存在。当我看 http://
我将 EJB 3.0 与 JBoss AS 7.1.1 Final 一起使用。当我尝试将客户端连接到服务器时出现此错误: Aug 15, 2012 12:05:00 PM org.jboss.ejb.
我正在为 Google Cast SDK 使用 React Native 包装器,但无法从发送方向接收方发送消息。我能够转换媒体或暂停并恢复它。问题仅在于自定义消息。我的自定义消息监听器永远不会在接收
我正在开发自定义 Serilog 接收器,它继承自 PeriodicBatchingSink 并调用我的网络服务将数据写入数据库,使用类似于 Serilog.Sinks.Seq 的模式。使用此代码作为
我想为安卓手机开发一个定制的 FM radio 应用程序,里面有 FM 接收芯片。 通过研究,我发现 FM 接收器通常由 BroadComm 开发。 主要的安卓手机制造商——三星、HTC、索尼爱立信是
我的 android list 中有一个 Intent 接收器,但我想让用户有机会选择他/她是否希望应用程序在特定状态下自动启动。到目前为止,我一直在使用带有广播接收器的服务,但我真的很想删除这个服务
我正在做一个如果我们摇动手机就锁屏的应用程序,我已经写了屏幕关闭的代码,但现在的问题是我需要一个广播接收器来检查屏幕是关闭还是打开,我怎么能做吗? 最佳答案 如果您需要在特定时刻检查屏幕是否关闭或打开
我让 MySQL 在一页上生成具有相同操作和提交按钮的表单。表格的数量各不相同。它们在提交时都调用同一个 PHP 文件。另外,我有一个 PHP 文件,它在提交时收集数据。请参见下面的示例。 问题是当提
谁能给我一个例子,说明如何在 Activity 类中正确取消注册 LocalBroadcastManager 接收器? Android 开发人员培训建议这样做: @Override publ
有问题的代码: func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
我是一名优秀的程序员,十分优秀!