HTML5元素拖放设置总结

Posted 2020-07-15 我就是那个王小明

将元素图片放入div盒子内

1、首先设置元素为可拖放：在img标签内加入draggable=”true”.

<img draggable="true">

2、设置元素的拖动：在img标签中用ondragstart属性调用一个函数drag(ev)，这个函数中用dataTransfer.setData()方法设置了被拖数据的数据类型和值.

<img ondragstart=”drag(event)”>

function drag(ev){

      ev.dataTansfer.setData(“Text”,ev.target.id)//数据类型是Text，值是可拖动元素的id（“drag1”）。

}

3、放到何处-ondragover

在被放置的div中用ondragover来规定设置的允许设置，因为默认无法将数据/元素放置到其他元素中，如果需要允许放置，必须阻止对元素默认的处理方式。

这时候用ondragover来调用一个函数alloeDrop(ev)，函数内部规定了event.preventDefault()方法用来阻止元素的默认处理方式

<div ondragover=”allowDrop(event)”></div>

function allowDrop（ev）{

      ev.prentDefault();

}

4、下面就是放置了-ondrop

在被放置的div中设置ondrop=”drop（event）”调用drop（ev）函数，函数中规定了放置的过程。

<div ondrop="drop(event)"></div>

Function drop(ev){

      ev.preventDefault();//用来避免浏览器对数据的默认处理

•   var data=ev.dataTransfer.getData（”Text”）;// 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。

 

      ev.target.appendChild (document.getElementById(data));// 被拖数据是被拖元素的 id ("drag1")把被拖元素追加到放置元素（目标元素）中

 

}