HTML5技术

html5 拖曳功能的实现[转] - sadkilo

字号+ 作者：H5之家 来源：H5之家 2016-03-13 17:00 我要评论( )

HTML5中实现拖放操作，至少经过如下步骤 1）设置被拖放对象元素的draggable属性设置为true 2）编写与拖放有关的事件处理代码 事件产生事件的元素描述 dragstart被拖拽物体开始拖放 dragenter被拖拽物体开始进入区域进入范围 dragover拖放过程中鼠标经过的元

HTML5中实现拖放操作，至少经过如下步骤
1）设置被拖放对象元素的draggable属性设置为true
2）编写与拖放有关的事件处理代码

事件 产生事件的元素 描述

dragstart 被拖拽物体 开始拖放

dragenter 被拖拽物体开始进入区域 进入范围

dragover 拖放过程中鼠标经过的元素（包括目标对象） 正在元素上

dragleave 拖放离开时鼠标经过的元素（包括目标对象） 离开范围

drop 目标对象 被拖拽物体放下 

dragend 被拖拽物体 拖放结束

事件发生的顺序： dragstart -> dragenter -> dragover ->dragleave ->drop ->dragend
如果分为两组来看：

被拖拽元素 (发生的事件) 要进入的目标元素（发生的事件）

dragstart dragenter

dragend dragover

  dragleve

  drop

可以学习一下W3school 的拖放 HTML5 拖放 

1. 第一个小例子：做了一个删除icon 的demo
<!DOCTYPE html>
 <html>
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
   <title>Demo</title>
   <style>
    html,body{width:100%;height:100%;}
    .wrapper{ width:580px;margin:0px auto;margin-top:80px;}
    ul{list-style:none;}
    li{float:left;margin-right:20px;}
    img{border-radius:12px;width:100px;height:100px;}
    .rubbish{position:absolute;bottom:80px;background:url("drag/220839emsyf6bty8sfgrxf.png")
       no-repeat;width:128px;height:128px;left:50%;margin-left:-64px;}
  </style>
 </head>
 <body>
 <div>
  <ul>
   <li draggable="true"><img src="drag/mzl.kcoxjsrs.png1.jpg"/></li>
   <li draggable="true"><img src="drag/mzl.dgltpgis.png1.jpg"/></li>
   <li draggable="true"><img src="drag/mzl.eiohimmz.png1.jpg"/></li>
   <li draggable="true"><img src="drag/mzl.aiikkslk.png1.jpg"/></li>
  </ul>
 </div>
  <div></div>
<script>

var iconarr = document.getElementsByTagName("li");//icon数组 var rubbishbin = document.getElementById("rubbish"); for( var i=0;i< iconarr.length;i++ ){ iconarr[i].ondragstart = function(ev){ /*拖拽开始(被拖拽元素) ondragstart 不可以写preventDefault事件*/ ev.dataTransfer.setData("text",ev.target.id);//存储拖拽元素的id*/ } } rubbishbin.ondragover = function(ev){ /*拖拽元素进入目标元素头上,不可少*/ ev.preventDefault(); } rubbishbin.ondrop = function(ev){ /*拖拽元素进入目标元素头上，同时鼠标松开的时候*/ ev.preventDefault(); if(window.addEventListener){ ev.stopPropagation(); }else if(window.attachEvent){ ev.cancelBubble=true; } var ul = document.getElementsByTagName("ul")[0]; //拖拽的是img 移除的是Li var node = document.getElementById(ev.dataTransfer.getData("text")).parentNode; ul.removeChild(node); rubbishbin.style.background="url('drag/220926qem3c3dsu53u8sha.png') no-repeat"; }

</script>
</body>
</html>

2. 利用drag & drop拖拽物体更换位置

<!DOCTYPE HTML>
 <html>
  <head>
   <meta charset="gbk"/>
   <title>Demo</title>
   <style>
    html,body{width:100%;height:100%;}
    .wrapper{ width:500px;margin:0px auto;margin-top:80px;}
    ul{list-style:none;width:500px;}
    li{float:left;margin:0px 20px 20px 0px;position: relative;width:132px;height:132px;}
    img{border-radius:12px;width:100px;height:100px;position: relative;-moz-user-select:none;cursor: move;}
    .rubbish{position:absolute;bottom:80px;background:url("empty.png") 
       no-repeat;width:128px;height:128px;left:50%;margin-left:-64px;}
    .hover{border:3px dashed #fff;}
    </style>
 </head>
 <body>
 <div>
  <ul>
   <li draggable="true"><img src="http://i1.mm-img.com/ios/78/60/786031289/mzl.kcoxjsrs.png1.jpg"/></li>
   <li draggable="true"><img src="http://i1.mm-img.com/ios/88/61/886104377/mzl.dgltpgis.png1.jpg"/></li>
   <li draggable="true"><img src="http://i1.mm-img.com/ios/84/1/840146800/mzl.eiohimmz.png1.jpg"/></li>
   <li draggable="true"><img src="http://i1.mm-img.com/ios/83/59/835969177/mzl.aiikkslk.png1.jpg"/></li>
   <li draggable="true"><img src="http://i1.mm-img.com/ios/28/17/281796108/mzl.oyxfxpvw.png1.jpg"/></li>
   <li draggable="true"><img src="http://i1.mm-img.com/ios/87/85/878549709/mzl.swnecgkk.png1.jpg"/></li>
   <li draggable="true"><img src="http://i1.mm-img.com/ios/78/70/787063884/mzl.pmfectba.jpg1.jpg"/></li>
   <li draggable="true"><img src="http://i1.mm-img.com/ios/87/18/871809581/mzl.fbyoqfjw.png1.jpg"/></li>
   <li draggable="true"><img src="http://i1.mm-img.com/ios/66/93/669390657/mzl.ekoptmtx.png1.jpg"/></li>

</ul>
</div>
<script>

var imgarrs = document.querySelectorAll("img"); var dragnow=null;//目前被拽着的物体 for(var i=0;i< imgarrs.length;i++ ){ addHandler(imgarrs[i],'dragstart',dragstart); addHandler(imgarrs[i],'dragenter',dragenter); addHandler(imgarrs[i],'dragover',dragover); addHandler(imgarrs[i],'dragleave',dragleave); addHandler(imgarrs[i],'drop',drop); addHandler(imgarrs[i],'dragend',dragend); } function addHandler(node,type,handler){ if(window.addEventListener){ node.addEventListener(type,handler,false); }else if(window.attachEvent){ node.attachEvent('on'+type,handler); } } function dragstart(e){//被拖拽元素 if(typeof e.target.style.opacity!='undefined'){ e.target.style.opacity='0.4'; }else{ e.target.style.filter = "alpha(opacity=40)"; } addClass(e.target,"zIndex"); e.dataTransfer.setData("text",e.target.src);//存储图片的src dragnow=e.target;//目前被拽的物体 } function dragover(e){//拖拽目标身上的效果 e.preventDefault(); e.dataTransfer.dropEffect='move'; } function dragenter(e){ if(e.stopPropagation){e.stopPropagation();} if(typeof e.target.classList !='undefined'){ e.target.classList.add('hover'); }else{ addClass(e.target,"hover"); } } function dragleave(e){ removeClass(e.target,"hover"); } function drop(e){ var src = e.dataTransfer.getData("text");//获取src e.preventDefault(); if(e.stopPropagation){ e.stopPropagation(); }else if(e.attachEvent){ e.cancelBubble=true; } if(dragnow == e.target){ removeClass(e.target,"hover"); removeClass(e.target,"zIndex"); return; }else{//如果拽着的元素与被拽着的元素一样，不用处理 dragnow.src = e.target.src; e.target.src = src; removeClass(e.target,"hover"); removeClass(e.target,"zIndex"); } } function dragend(e){ e.preventDefault(); if(typeof e.target.style.opacity!='undefined'){ e.target.style.opacity='1'; }else{ e.target.style.filter = "alpha(opacity=100)"; }//针对FF 在dragend 时候阻止冒泡 removeClass(e.target,"zIndex"); }//发生在被拖拽物体身上 function addClass(node,newclass){ if(node.className.indexOf(newclass)>0){ return; } node.className = node.className?node.className+" "+newclass:newclass; } function removeClass(node,className){ if(typeof node.classList !='undefined'){ node.classList.remove(className); }else{ var classarr = node.className.split(/\s+/); var arr = []; for( var i=0;i< classarr.length;i++ ){ if(classarr[i] == className)continue; arr.push(classarr[i]); } node.className = arr.join(" "); } }

　

html5拖曳功能实现sadkilo

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5 进阶系列：拖放 API 实现拖放排序 - _林鑫

    HTML5 进阶系列：拖放 API 实现拖放排序 - _林鑫

    2017-05-02 11:02

  • HTML5 进阶系列：indexedDB 数据库 - _林鑫

    HTML5 进阶系列：indexedDB 数据库 - _林鑫

    2017-04-27 14:02

  • HTML5 高级系列：web Storage - _林鑫

    HTML5 高级系列：web Storage - _林鑫

    2017-04-27 14:01

  • HTML5和CSS3 - 奔跑在起跑线佼佼者

    HTML5和CSS3 - 奔跑在起跑线佼佼者

    2017-04-20 13:00

网友点评
精彩导读
Dora.Interception: 一个为.NET Core度身定制的AOP框架 - Artech

Dora.Interception: 一个为.NET Core度身定制

用Visual Studio2017写C++静态库 - jily16

用Visual Studio2017写C++静态库 - jily16

vue全局配置----小白基础篇 - 星光笔

vue全局配置----小白基础篇 - 星光笔

这短短几行代码价值一万 - 小尧弟

这短短几行代码价值一万 - 小尧弟

HTML5优势 - 计划

HTML5优势 - 计划

热门资讯
Copyright © 2006-2018 www.h5cn.com.H5之家 版权所有 Power by H5CN 备案： 黔ICP备15004751-2
HTML5入门 HTML5技术 canvas教程 专题学习