Advertisement

angular实现拖放与定位功能(基于HTML5)

阅读量:

Drag&&Drop

一、概述

  1. 拖放功能的核心目标是实现对象在用户指定位置的定位操作
  2. 拖放作为一项普遍存在的功能特性,例如在微信聊天界面中,用户可通过直接拖拽文件或图片至对话输入区域完成信息发送操作。

二、拖放实例

复制代码
      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)

还没有任何评论哟~