angular实现拖放与定位功能(基于HTML5)
发布时间
阅读量:
阅读量
Drag&&Drop
一、概述
- 拖放功能的核心目标是实现对象在用户指定位置的定位操作
- 拖放作为一项普遍存在的功能特性,例如在微信聊天界面中,用户可通过直接拖拽文件或图片至对话输入区域完成信息发送操作。
二、拖放实例
export class DrogDragComponent implements OnInit {
allowDrop(event:any){
event.preventDefault();
}
drag(event:any){
event.dataTransfer.setData("Text",event.target.id);
}
drop(event:any){
event.preventDefault();
var data=event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
constructor() { }
ngOnInit(): void {
}
全部评论 (0)
还没有任何评论哟~
