拖拽相关属性
Drag gable属性是ht ML 5的全局属性，是html5支持拖放操作的方式之一，用来表示元素 是否 可以被拖放,draggable有三个值，true表示可以拖放，false表示不可以被拖放，auto表示使用浏览器的默认值
XM L/HTML Code 复制内容到剪贴板
< ul > &nbs p; < li id = " IT em1" draggable = "true" > 列表1 </ li > < li id = "item2" draggable = "true" > 列表2 </ li > < li id = "item3" draggable = "true" > 列表3 </ li > < li id = "item4" draggable = "true" > 列表4 </ li > < li id = "item5" draggable = "true" > 列表5 </ li > < li id = "item6" draggable = "true" > 列表6 </ li > </ ul >
拖拽相关的事件
ondragstart：此事件在用户 开始 拖动元素或选择文本时触发 ondrag:元素正在拖动时触发 ondragend:用户完成元素拖放时触发 ondragleave:当被鼠标拖动的对象离开其容器范围时触发 ondragover:当某个被拖动的对象在另一对象容器范围内拖动时触发此事件，此事件发生在目标元素身上 ondrop:在一个拖动 过程中 ，释放鼠标时触发，此事件作用在目标元素身上
data transfer 对象相关方法
setData(format,data):添加自定义 数据格式 getData(format):获取自定义的数据格式clearData([format]):清除自定义的数据格式及数据
Event.p rev entDefault()
此方法是阻止事件的默认行为，在ondragover中一定要执行 PR eventDefault(),否则ondrop事件不会被触发
实现案例：
XML/HTML Code 复制内容到剪贴板
<!DOCTY PE html > < html > < head > < meta charset = "UTF-8" > < title > </ title > < style type = "text/css" > .m ai n{ width: 800px; /*border: 1px solid # ccc;*/ h ei ght: 400px; ;m arg in:0 auto; } .left{ float: left; width: 25%; background-color: #666; height: 370px; text-align: center ; color: black; padding -t op:30px ; font- Size: 110px; } .right{ float: right; width: 69%; } .right ul,.right li{ mar gin : 0; padding: 0; } .right li{ list -s tyle: none; border: 2px dashed #666; background-color: #ddd; height: 60px; margin-top: 3px; text -i ndent: 30px; line-height: 60px; } .right li:hover{ background-color: #ccc; } #message{ width: 800px; text-align: center; border: 1px solid black; margin: 20px auto; font-size:28px; } </ style > < script type = "text/javascript" > window.onload = function (){ VAR aLi = document . getelementsbytagname ('li'); var oLeft = document .getElementsBy classname ('left')[0]; var oMessage = document .getElementById('message'); for(var i = 0 ;i < aLi.length ; i++ ){ aLi[i] .index = i+1; aLi[i] .ondragstart = function (ev){ //事件对象ev var ev ev = ev || event; ev.dataTransfer.setData("Text",this.id); } } oLeft.ondrop = function (ev){ var ev ev = ev || event; var data = ev .dataTransfer.getData("Text"); var num = document .getElementById(data).index; document.getElementById(data).remove(); oMessage.innerHTML = "列表" +num+"被放进了 垃圾 箱"; this.style.color = "black" ; } oLeft.ondragover = function (ev){ var ev ev = ev || event; ev.preventDefault(); } oLeft.ondragenter = function (){ this.style.color = "#fff" ; } } </ script > </ head > < body > < div class = "main" > < div class = "left" > 垃圾箱 </ div > < div class = "right" > < ul > < li id = "item1" draggable = "true" > 列表1 </ li > < li id = "item2" draggable = "true" > 列表2 </ li > < li id = "item3" draggable = "true" > 列表3 </ li > < li id = "item4" draggable = "true" > 列表4 </ li > < li id = "item5" draggable = "true" > 列表5 </ li > < li id = "item6" draggable = "true" > 列表6 </ li > </ ul > </ div > < div style = "clear: both;" > </ div > </ div > < div id = "message" > 拖到垃圾箱删除列表 </ div > </ body > </ html >
以上这篇HTML5拖拽的 简单 实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
总结
以上是 为你收集整理的 HTML5拖拽的简单实例 全部内容，希望文章能够帮你解决 HTML5拖拽的简单实例 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。