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標簽的具體使用實例