国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > HTML > 正文

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教程

鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 定边县| 乐安县| 黑龙江省| 阳原县| 柳江县| 临高县| 陆川县| 万载县| 永昌县| 皮山县| 阿图什市| 荣昌县| 会东县| 桓仁| 嘉兴市| 湖南省| 潍坊市| 巴彦淖尔市| 滨州市| 镇沅| 遵义县| 长寿区| 安阳市| 双桥区| 尖扎县| 新泰市| 榆林市| 武宁县| 剑川县| 东港市| 乐山市| 东丽区| 柏乡县| 岢岚县| 浦江县| 商南县| 红安县| 两当县| 武安市| 环江| 维西|