html 拖拽,css实现拖拽

　　下面的代码用来介绍html5拖拽应用记录，具体代码如下：

　　E.dataTransfer.setData(a ， set value )；e . data transfer . get data( a )；函数drop(e){！-试试console.log(e)，在这里可以得到很多可以使用的API-e . data transfer . setdata( a ，e . target . id)；}拖动元素

　　应使用draggable=true 属性添加被拖动的元素。

　　一些注意点：

　　Drop必须伴随dragover，否则事件不会生效。

　　document.getElementById(right )。ondragover=function(ev){ ev . prevent default()；//防止向上冒泡} document . getelementbyid( right )。ondrop=function(ev){ ev . prevent default()；//停止冒泡console . log( put in )；}react中使用的事件必须是hump，例如：onDragOver。

　　记得补充。vue中ui库组件原生，例如：@ drop.native。

　　完整测试案例

　　！DOCTYPE html html lang= en head meta charset= UTF-8 title title/title style * { margin:0；填充：0；} .div1{宽度：200px高度：200px边框：1px纯红；位置：相对；左边距：20px浮动：左；} .div2{宽度：200px高度：200px边框：1px纯蓝；位置：相对；左边距：20px浮动：左；} .div3{宽度：200px高度：200px边框：1px纯绿；位置：相对；左边距：20px浮动：左；} p{背景色：橙色；边距-顶部：5px}/style/headbody div class= div 1 id= div 1 ！-在h5中，如果要拖放元素，必须将draggable=true 添加到元素中。图片和超链接默认可以拖动-p id= PE draggable= true 尽量把我拖过去/p p id=pe1 draggable=true 尽量把我也拖过去/p/Div Div class= Div 2 id= Div 2 Div class= Div 3 id= Div 3 /Div script/*学习拖拽主要是学习拖拽事件*/var p=document . query selector(# pe1))；var div 2=document . query selector(# div 2))；var div 3=document . query selector(# div 3))；/*应用于被拖动元素的事件*ondrag应用于被拖动元素，整个拖动过程会调用——OndragStart应用于被拖动元素，ondragleave应用于拖动开始时的被拖动元素，ondragend应用于鼠标离开时的被拖动元素，以及*/p . OndragStart=function(e){ console . log( start )在拖动结束时调用；e . data transfer . set date( a )} p . ondragend=function(){ console . log( end )；} p . ondragleave=function(){ console . log(离开目标)；} p . ONDRAG=function(){//console . log(连续触发器-11111 )；}/*应用于目标元素的事件*ondragenter应用于目标元素，当拖动元素进入时，ondragover应用于目标元素，当停留在目标元素上时，ondragleave应用于目标元素，当在目标元素上释放鼠标时，*/div2。ondragenter=function(){ console . log( enter target 1 )} div 2 . ondragover=function(e){ console . log(e)；Console.log(悬停在目标1 )；//console . log( ondragover )；/*如果要触发ondrop事件，必须在这个位置停止浏览器的默认行为*/e . prevent default()；}/*浏览器默认会屏蔽ondrop事件：我们要在ondragover */div2中屏蔽浏览器的默认行为。ONDROP=function(){ console . log( Lock target 1，land )；/*将拖动的元素添加到当前目标元素*/div 2 . appendchild(p)；} div 2 . ondragleave=function(){ console . log(离开目标1 )；} div3。ondragenter=function(){ console . log( Enter Target 2 )；} div 3 . ondragover=function(e){ console . log(悬停在目标2 )；//console . log( ondragover )；/*如果要触发ondrop事件，必须在这个位置停止浏览器的默认行为*/e . prevent default()；} div 3 . ondrop=function(){ console . log( target 2，land )；/*将拖动的元素添加到当前目标元素*/div 3 . appendchild(p)；} div 3 . ondragleave=function(){ console . log(离开目标2 )；}/脚本/正文/html总结

　　关于html5拖拽应用记录的这篇文章就到这里了。更多相关html5拖放应用内容，请搜索之前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。