html5 Drag and Drop

骑猪看日落 2022-08-21 03:22 155阅读 0赞

html5 Drag and Drop 允许我们拖放元素，我们文件上传可以像桌面程序一样，直接拖放就上传!!

浏览器默认可以拖放的元素有图片，文本（需要先选中文本再移动）和链接，其他的元素若想要进行拖放，可以添加draggable = “true”

draggable有如下属性：

1.  true 表示此元素可拖拽
2.  false 表示此元素不可拖拽
3.  auto 除img和带href的标签a标签表示可拖拽外，其它标签均表示不可拖拽

html5拖放，分拖动元素和目标位置，他们各自的事件如下

拖动元素：  
1. dragstart 拖拽前触发（鼠标按下并开始拖拽）  
2. drag 拖拽过程中触发（连续出发，即使鼠标不移动也会连续触发）  
3. dragend 拖拽结束触发

目标位置：  
1. dragenter 进入目标位置触发  
2. dragover 在目标位置移动触发  
3. drop 释放鼠标瞬间触发  
4. dragleave 鼠标离开目标位置素触发

整个拖拽过程事件顺序：  
dragstart -> drag -> dragenter -> dragover -> dragleave -> drop -> dragend

我们可以通过设置目标位置事件，改变拖动元素进入和进出等的样式，体改用户友好体验

若要捕捉drop的事件，需要在取消dragover事件默认行为。只是改变样式，还不够，我们需要在拖放元素和目标位置进行通信，比如，需要把拖放元素放到目标位置中，我们利用dataT ransfer，数据的通信使者。

//拖动图片，将图片移动到目标位置中
    //html代码
     <img src = "color.png" id = "drag"/>
     <div class = "target" id = "target"></div>
    //js代码
    drag.addEventListener("dragstart",function(ev){ 
         ev.dataTransfer.setData("title","拖放图片");
    });
    
    target.addEventListener("drop",function(ev){ 
     this.style.border = "2px solid green";
     var title = ev.dataTransfer.getData("title");
     var imgUri = ev.dataTransfer.getData("text/uri-list");
     target.innerHTML = '<img src="' + imgUri + '" title="' + title + '" width="100px" height = "100px" />';  
      ev.preventDefault();   //组织浏览的默认行为
    });

关于event.dataTransfer，有常用的如下属性

1.  setData(key,value) 两个参数都是字符串类型
2.  getData(key) getData()可以取得由setData()保存的值
3.  effectAllowed 在目标位置事件中设置，默认是uninitialized  
    “uninitialized”：没有该被拖动元素放置行为。  
    “none”：被拖动的元素不能有任何行为。  
    “copy”：只允许值为“copy”的dropEffect。  
    “link”：只允许值为“link”的dropEffect。  
    “move”:只允许值为“move”的dropEffect。  
    “copyLink”：允许值为“copy”和“link”的dropEffect。  
    “copyMove”：允许值为“copy”和”link”的dropEffect。  
    “linkMove”：允许职位“link”和”move”的dropEffect。  
    “all”：允许任意dropEffect。
4.  dropEffect 在拖放元素事件中设置，默认是all，光标样式有  
    “none”：不能把拖动的元素放在这里。这是除文本框之外所有元素的 默认值。  
    “move”：应该把拖动的元素移动到放置目标。  
    “copy”：应该把拖动的元素复制到放置目标。  
    “link”：表示放置目标会打开拖动的元素（但拖动的元素必须是一个链接，有URL）。
5.  setDragImage(element, x, y) 指定一副图像，当拖动发生时，显示在光标下方。这个方法接受的三个参数分别是要显示的HTML元素和光标在图像中的x、y坐标。其中，HTML元素（可以是隐藏的元素）可以是一副图像，也可以是其它元素。是图像则显示图像，是其它元素则显示渲染后的元素。实现这个方法的浏览器有Firefox 3.5+、Safari 4+ 和 Chorme  
    files 获取外部拖拽文件的一个类似数组的集合（length）。集合中每个元素有type属性，依次判断拖拽的文件类型。实现这个属性的浏览器有IE10+、Firefox 3.5+和Chrome。

getData(),setData()

setData()方法的第一个参数，也是getDAta()方法唯一的一个参数，是一个字符串，表示保存的数据类型，取值为”text”或“URL”，在拖动文本框中的文本时，浏览器会调用setData()方法，将拖动的文本以“text”格式保存在dataTransfer对象中。类似地，在拖放链接或图像时，会调用setData()方法并保存URL，当拖放到目标位置时，如果不调用ev.preventDefault();浏览器会默认会根据相关的数据类型做相应的行为，如保存是URL，流浪器则会打开该URL

target.addEventListener("drop",function(ev){ 
     this.style.border = "2px solid green";
     var title = ev.dataTransfer.getData("title");
     var imgUri = ev.dataTransfer.getData("text/uri-list");
     target.innerHTML = '<img src="' + imgUri + '" title="' + title + '" width="100px" height = "100px" />';  
     // ev.preventDefault(); //去掉，则浏览器会打开该图片路径，将图片直接显示在浏览器上，浏览器的地址栏是该图片的地址,因为拖放图片，浏览器会调用setData保存数据格式为url
    });

effectAllowed dropEffect

drag.addEventListener("dragstart",function(ev){ 
        ev.dataTransfer.effectAllowed = "move"; //设置拖动元素允许拖放的图标样式
    });
    
    target.addEventListener("dragover",function(ev){ 
     ev.dataTransfer.dropEffect = "copy"; //设置目标位置允许放置的图标样式
     ev.preventDefault();  
    });

effectAllowed和dropEffect可以改变拖动图标的样式导致光标显示为不同的符号。dropEffect属性只有搭配effectAllowed属性才有用，effectAllowed和dropEffect的值要一样，目标位置才能放置拖放元素