HTML5拖拽的简单实例

2020-03-24 19:24:12

字体：大中小

来源：转载

供稿：网友

拖拽相关属性draggable属性是html5的全局属性，是html5支持拖放操作的方式之一，用来表示元素是否可以被拖放,draggable有三个值，true表示可以拖放，false表示不可以被拖放，auto表示使用浏览器的默认值XML/HTML Code复制内容到剪贴板
liid= item1 draggable= true 列表1 /li liid= item2 draggable= true 列表2 /li liid= item3 draggable= true 列表3 /li liid= item4 draggable= true 列表4 /li liid= item5 draggable= true 列表5 /li liid= item6 draggable= true 列表6 /li /ul
拖拽相关的事件ondragstart：此事件在用户开始拖动元素或选择文本时触发 ondrag:元素正在拖动时触发 ondragend:用户完成元素拖放时触发 ondragleave:当被鼠标拖动的对象离开其容器范围时触发 ondragover:当某个被拖动的对象在另一对象容器范围内拖动时触发此事件，此事件发生在目标元素身上 ondrop:在一个拖动过程中，释放鼠标时触发，此事件作用在目标元素身上dataTransfer 对象相关方法setData(format,data):添加自定义数据格式 getData(format):获取自定义的数据格式clearData([format]):清除自定义的数据格式及数据Event.preventDefault()此方法是阻止事件的默认行为，在ondragover中一定要执行preventDefault(),否则ondrop事件不会被触发实现案例： XML/HTML Code复制内容到剪贴板
width:800px; /*border:1pxsolid#ccc;*/ height:400px; margin:0auto; } .left{ float:left; width:25%; background-color:#666; height:370px; text-align:center; color:black; padding-top:30px; font-size:110px; } .right{ float:right; width:69%; } .rightul,.rightli{ margin:0; padding:0; } .rightli{ list-style:none; border:2pxdashed#666; background-color:#ddd; height:60px; margin-top:3px; text-indent:30px; line-height:60px; } .rightli:hover{ background-color:#ccc; } #message{ width:800px; text-align:center; border:1pxsolidblack; margin:20pxauto; font-size:28px; } /style scripttype= text/javascript window.onload=function(){ varaLi=document.getElementsByTagName('li'); varoLeft=document.getElementsByClassName('left')[0]; varoMessage=document.getElementById('message'); for(vari=0;i aLi.length;i++){ aLi[i].index=i+1; aLi[i].ondragstart=function(ev){ //事件对象ev varevev=ev||event; ev.dataTransfer.setData( Text ,this.id); } } oLeft.ondrop=function(ev){ varevev=ev||event; vardata=ev.dataTransfer.getData( Text varnum=document.getElementById(data).index; document.getElementById(data).remove(); oMessage.innerHTML= 列表 +num+ 被放进了垃圾箱 this.style.color= black ; } oLeft.ondragover=function(ev){ varevev=ev||event; ev.preventDefault(); } oLeft.ondragenter=function(){ this.style.color= #fff ; } } /script /head body div >以上这篇HTML5拖拽的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持phpstudy。html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：html5通过canvas实现刮刮卡效果示例分享

下一篇：HTML frame标签怎么用？frame标签的具体使用实例