HTML5--拖拽事件与DataTransfer对象
需求分析 -- 生产开发中元素的拖拽是一个相当常见的需求,这就需要用到draggable这个属性以及对应的拖拽相关事件
如果想要拖动某个元素那么首先就需要给其一个draggable属性,并将该属性设置为true
拖放事件
拖放的过程中被拖放的对象称为源对象,拖放过程中间经过的其他对象被称为过程对象,最终到达的目标区域叫做目标对象,拖放事件可以用这几个对象来进行分类,不同的事件会被不同的对象触发
源对象
dragstart : 源对象开始拖放,开始移动事件触发
drag : 源对象拖放过程中,移动被拖拽对象触发
dragend : 源对象拖放结束,整个拖放操作结束时触发
过程对象
dragenter : 源对象进入过程对象范围内,被拖拽对象进入过程时被触发
dragover : 源对象在过程对象范围内移动,被拖拽对象在过程对象内移动时触发
dragleave : 源对象离开过程对象的范围,被拖拽对象离开目标对象时触发
目标对象
drop:源对象拖放到目标对象中,目标对象完全接受被拖拽对象时触发,可理解为在目标对象内松手时触发
dataTransfer对象 -- 在所有的拖放事件中都提供了一个数据传输对象dataTransfer,主要作用于源对象和目标对象之间的传递数据
setData(format,data)
设置拖拽事件中要传递的数据,format的参数为数据类型
该方法向dataTransfer中对象中存入数据,接受两个参数,第一个表示要存入的数据类型,共有四种
text/plain
text/html
text/xml
text/uri-list
第二个参数为要存入的数据,例如event.dataTransfer.setData('text/plain','hellow draggable')
getData(format)
获得拖拽事件中传递的数据,format参数为数据结构
该方法从dataTransfer对象中存储的数据,参数为在setData方法中指定的数据类型,例如:event.dataTransfer.getData('text/plain')
clearData()
该方法清空dataTransfer对象中存储的数据,参数可选,为数据类型。若为空,则清空所有数据
例子
<!DOCTYPE HTML> <html> <head> <style type="text/css"> #box1, #box2, #box3{ width: 200px; height: 300px; border-radius: 10px; border: 1px solid #333; float: left; margin-left: 20px; } #item1,#item2,#item3,#item4 { width: 90%; margin: 0 auto; border-radius: 10px; height: 50px; border: 1px solid #333; margin-top: 10px; text-align: center; line-height: 50px; } </style> </head> <body> <div id="box1" ondragover="allowDropIn(event)" ondrop="drop(event)"> <div id="item1" draggable="true" ondragstart="drag(event)">方块一</div> <div id="item2" draggable="true" ondragstart="drag(event)">方块二</div> <div id="item3" draggable="true" ondragstart="drag(event)">方块三</div> </div> <div id="box2" ondragover="allowDropIn(event)" ondrop="drop(event)"> <div id="item4" draggable="true" ondragstart="drag(event)">方块四</div> </div> <div id="box3" ondragover="allowDropIn(event)" ondrop="drop(event)"> </div> </body> <script type="text/javascript"> function allowDropIn(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text", ev.target.id); } function drop(ev) { let pattern1 = /^box/ var data = ev.dataTransfer.getData("Text"); console.log('ev',ev.target,ev.dataTransfer) if (pattern1.test(ev.target.id)) { ev.target.appendChild(document.getElementById(data)); ev.preventDefault(); } } </script> </html>
效果
三个盒子可以任意拖拽将其中的子项进行交换