HTML5拖拽的簡單實(shí)例

2020-03-24 19:24:12

字體：大中小

供稿：網(wǎng)友

拖拽相關(guān)屬性draggable屬性是html5的全局屬性，是html5支持拖放操作的方式之一，用來表示元素是否可以被拖放,draggable有三個(gè)值，true表示可以拖放，false表示不可以被拖放，auto表示使用瀏覽器的默認(rèn)值XML/HTML Code復(fù)制內(nèi)容到剪貼板
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
拖拽相關(guān)的事件ondragstart：此事件在用戶開始拖動元素或選擇文本時(shí)觸發(fā) ondrag:元素正在拖動時(shí)觸發(fā) ondragend:用戶完成元素拖放時(shí)觸發(fā) ondragleave:當(dāng)被鼠標(biāo)拖動的對象離開其容器范圍時(shí)觸發(fā) ondragover:當(dāng)某個(gè)被拖動的對象在另一對象容器范圍內(nèi)拖動時(shí)觸發(fā)此事件，此事件發(fā)生在目標(biāo)元素身上 ondrop:在一個(gè)拖動過程中，釋放鼠標(biāo)時(shí)觸發(fā)，此事件作用在目標(biāo)元素身上dataTransfer 對象相關(guān)方法setData(format,data):添加自定義數(shù)據(jù)格式 getData(format):獲取自定義的數(shù)據(jù)格式clearData([format]):清除自定義的數(shù)據(jù)格式及數(shù)據(jù)Event.preventDefault()此方法是阻止事件的默認(rèn)行為，在ondragover中一定要執(zhí)行preventDefault(),否則ondrop事件不會被觸發(fā)實(shí)現(xiàn)案例： XML/HTML Code復(fù)制內(nèi)容到剪貼板
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+ 被放進(jìn)了垃圾箱 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拖拽的簡單實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持phpstudy。html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：html5通過canvas實(shí)現(xiàn)刮刮卡效果示例分享

下一篇：HTML frame標(biāo)簽怎么用？frame標(biāo)簽的具體使用實(shí)例