这篇文章主要介绍了HTML5拖拽应用记录及注意点有哪些，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。具体代码如下所示：e.dataTransfer.setData("
这篇文章主要介绍了HTML5拖拽应用记录及注意点有哪些，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
具体代码如下所示：
e.dataTransfer.setData("a","设置的值");e.dataTransfer.getData("a");function drop(e){ <!--尝试console.log(e),这里能拿到好多你用得到的api--> e.dataTransfer.setData("a", e.target.id);}拖动元素
被拖动的元素上要加入入draggable="true"属性
一些注意点：
drop 必须配上 draGover，否则事件不生效
document.getElementById('right').ondragover = function (ev) { ev.preventDefault(); //阻止向上冒泡}document.getElementById('right').ondrop = function (ev) { ev.preventDefault(); //阻止向上冒泡 console.log("放入");}React中使用事件必须是驼峰,例如：onDragOver
Vue中在ui库组件上加的时候记得加 .native,例如：@drop.native
完整测试案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .div1{ width: 200px; height: 200px; border: 1px solid red; position: relative; margin-left:20px; float: left; } .div2{ width: 200px; height: 200px; border: 1px solid blue; position: relative; margin-left:20px; float: left; } .div3{ width: 200px; height: 200px; border: 1px solid green; position: relative; margin-left:20px; float: left; } p{ background-color: orange; margin-top: 5px; } </style></head><body><div class="div1" id="div1"> <!--在h6中，如果想拖拽元素，就必须为元素添加draggable="true". 图片和超链接默认就可以拖拽--> <p id="pe" draggable="true">试着把我拖过去</p> <p id="pe1" draggable="true">试着也把我拖过去</p></div><div class="div2" id="div2"></div><div class="div3" id="div3"></div><script> var p=document.querySelector("#pe1"); var div2=document.querySelector("#div2"); var div3=document.querySelector("#div3"); p.ondragstart=function(e){ console.log("开始"); e.dataTransfer.setDate("a") } p.ondragend=function(){ console.log("结束"); } p.ondragleave=function(){ console.log("离开目标"); } p.ondrag=function(){ // console.log("持续触发---111111"); } div2.ondragenter=function(){ console.log("进入目标1"); } div2.ondragover=function(e){ console.log(e); console.log("在目标1中盘旋"); //console.log("ondragover"); e.preventDefault(); } div2.ondrop=function(){ console.log("锁定目标1，降落"); div2.appendChild(p); } div2.ondragleave=function(){ console.log("离开目标1"); } div3.ondragenter=function(){ console.log("进入目标2"); } div3.ondragover=function(e){ console.log("在目标2中盘旋"); //console.log("ondragover"); e.preventDefault(); } div3.ondrop=function(){ console.log("锁定目标2，降落"); div3.appendChild(p); } div3.ondragleave=function(){ console.log("离开目标2"); }</script></body></html>感谢你能够认真阅读完这篇文章，希望小编分享的“html5拖拽应用记录及注意点有哪些”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网精选频道，更多相关知识等着你来学习!
--结束END--
本文标题: html5拖拽应用记录及注意点有哪些
本文链接: https://www.lsjlt.com/news/255705.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0