html实现拖拽效果,css实现拖拽
拖拽相关属性
可拖动的属性是html5的全局属性，是html5支持拖放操作的方式之一，用来表示元素是否可以被拖放，可拖动有三个值，真的表示可以拖放，假的表示不可以被拖放，自动表示使用浏览器的默认值
XML/HTML代码复制内容到剪贴板ul liid=item1draggable=true 列表1/Li liid= item 2 draggable= true 列表2/Li liid= item 3 draggable= true 列表3/Li liid= item 4 draggable= true 列表4/Li liid= item 5 draggable= true 列表5/Li liid= item 6 draggable= true 列表6/li /ul
拖拽相关的事件
ondragstart:此事件在用户开始拖动元素或选择文本时触发翁德拉格：元素正在拖动时触发ondragend:用户完成元素拖放时触发软骨组织：当被鼠标拖动的对象离开其容器范围时触发ondragover:当某个被拖动的对象在另一对象容器范围内拖动时触发此事件，此事件发生在目标元素身上ondrop:在一个拖动过程中，释放鼠标时触发，此事件作用在目标元素身上
dataTransfer 对象相关方法
setData(格式，数据):添加自定义数据格式获取数据(格式):获取自定义的数据格式清除数据([格式]):清除自定义的数据格式及数据
Event.preventDefault()
此方法是阻止事件的默认行为，在翁德拉戈弗中一定要执行preventDefault()，否则放置事件不会被触发
实现案例：
XML/HTML代码复制内容到剪贴板！文档类型html html头元字符集=UTF八号标题/标题样式类型=文本/css .主{宽度：800px/*边框：1 px纯色# CCC*/高度：400像素边距：0自动；} .left { float:left；宽度：25%;背景色：# 666;高度：370像素文本对齐：居中；颜色：黑色；padding-top:30px；字体大小：110px}。右{浮动：右；宽度：69%;} .好的右李{ margin:0；填充：0;} .右李{列表式：无；边框：2px虚线# 666背景色：# ddd高度：60 px margin-top:3px；文本缩进：30px行高：60px}。右李：悬停{ background-color:# CCC；} #消息{ width:800 px；文本对齐：居中；边框：1 px固体黑保证金：20pxauto字体大小：28px }/style script type= text/JavaScript 窗口。onload=function(){ varaLi=document。getelementsbytagname( Li )；varoLeft=文档。getelementsbyclassname( left )[0]；varo消息=文档。getelementbyid(“message”)；for(vari=0；iaLi .长度我){阿里[我]。index=I 1；阿里[我]。ondragstart=function(ev){ //事件对象ev varevev=ev 事件；ev.dataTransfer.setData(Text ，this。id)；} } oleft。ondrop=function(ev){ varevev=ev event；var数据=ev。数据传输。获取数据(“文本”)；varnum=文档。getelementbyid(数据).指数；document.getElementById(数据)。移除();oMessage.innerHTML=列表数字被放进了垃圾箱；这个。风格。color= black} oleft。ondragover=function(ev){ varevev=ev event；伊芙。防止默认()；} oleft。ondragenter=function(){ this。风格。color= # fff} }/script/head body div class= main div class= left垃圾箱/div div class= right ul liid= item 1 draggable= true 列表1/Li liid= item 2 draggable= true 列表2/Li liid= item 3 draggable= true 列表3/Li liid= item 4 draggable= true 列表4/Li liid= item 5 draggable= true 列表5/Li liid= item 6 draggable= true 列表6/Li/ul/div div style= clear:both；/div /div divid=message 拖到垃圾箱删除列表/div /body /html以上这篇HTML5拖拽的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。