html5 拖曳功能的实现[转]

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 class="wrapper">
  <ul>
   <li draggable="true"><img src="drag/mzl.kcoxjsrs.png1.jpg" id="1"/></li>
   <li draggable="true"><img src="drag/mzl.dgltpgis.png1.jpg" id="2"/></li>
   <li draggable="true"><img src="drag/mzl.eiohimmz.png1.jpg" id="3"/></li>
   <li draggable="true"><img src="drag/mzl.aiikkslk.png1.jpg" id="4"/></li>
  </ul>
</div>
<div class="rubbish" id="rubbish"></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 class="wrapper">
  <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(" ");

       }

    }

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

第二个例子中有一点疑惑：
我一开始想用dataTransfer.setData("url",src)来存储src 的，但是发现这样在IE9中getData("url")的时候无法获取值，所以改回"text"了。

html5 拖曳功能的实现[转]的更多相关文章

HTML5 离线功能介绍
HTML5 是目前正在讨论的新一代 HTML 标准,它代表了现在 Web 领域的最新发展方向.在 HTML5 标准中,加入了新的多样的内容描述标签,直接支持表单验证.视频音频标签.网页元素的拖拽.离线 ...
利用HTML5定位功能，实现在百度地图上定位（转）
原文:利用HTML5定位功能,实现在百度地图上定位代码如下: 测试浏览器:ie11定位成功率100%,Safari定位成功率97%,(add by zhj :在手机上测试(用微信内置浏览器打开),无 ...
分享8款最新HTML5/CSS3功能插件及源码下载
1.HTML5/CSS3鬼脸表情下拉菜单超级可爱这款HTML5/CSS3鬼脸表情下拉菜单真的很特别,虽然菜单的实现并没有利用复杂的HTML5/CSS3技术,但是创意的确不错. 在线演示源码下载 ...
Android webView 缓存 Cache + HTML5离线功能解决
时间 -- :: CSDN博客原文 http://blog.csdn.net/moubenmao/article/details/9076917 主题 Android HTML5 WebView的缓 ...
利用HTML5定位功能，实现在百度地图上定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
HTML5 新功能
HTML5 中的一些有趣的新特性: 用于绘画的 canvas 元素用于媒介回放的 video 和 audio 元素对本地离线存储的更好的支持新的特殊内容元素,比如 article.footer. ...
HTML5新增功能
HTML5日期输入类型(date) 1.HTML5规范里只规定date新型input输入类型 HTML5里的dateinput类型给了给了浏览器实现原生日历的机会,从此之后,JavaScript版的日 ...
HTML5定位功能，实现在百度地图上定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
（webapp）微信和safri 对于html5 部分功能不兼容，多选或单选下拉框去除边框无效果。
1 appearance:none; 2 -moz-appearance:none; /* Firefox */ 3 -webkit-appearance:none; /* Safari 和 Chro ...

随机推荐

UITableViewController
UITableViewController 目录概述 UITableView UITableViewCell 与UITableViewController相关的代理 UITableViewDataS ...
好记心不如烂笔头之JQuery学习，第三章
第三章中主要讲了几个对DOM进行操作的方法. 归纳如下: 属性的获取和设置: //属性的获取 $("li").attr("title"); //属性的设置 $( ...
NServiceBus
官方网站:http://docs.particular.net/nservicebus/ NServiceBus 是一个用于构建企业级 .NET系统的开源通讯框架.它在消息发布/订阅支持.工 ...
linux记录登录ip方法
PS:Linux用户操作记录一般通过命令history来查看历史记录,但是如果因为某人误操作了删除了重要的数据,这种情况下history命令就不会有什么作用了.以下方法可以实现通过记录登陆IP地址和所 ...
TikaEntityProcessor 各种示例
1. <dataConfig> <dataSource type="BinFileDataSource" /> <script><![CD ...
axure rp pro 6.5 注册码
发现一可用的注册码: Name:BEAN Serial:MZlb4FJwOVw+j04A4pX8S5genhcCOo1adsaH/ZHOukDY7OyPJcCKUHlwUEfU0Osr (已验证可用) ...
友盟分享各平台URL设置
首先,想要进项友盟分享,需要到各平台去申请ID和KEY 比如想进行微信分享,就到微信开发者平台去创建应用,拿到对应的id和appScreat,然后进行设置: 参考资料
Oracle 11g R2 for Win7旗舰版（64位）的安装步骤
1.下载Oracle 11g R2 for Windows的版本下载地址:http://www.oracle.com/technetwork/database/enterprise-edition/ ...
Win10 VMware虚拟机无法打开内核设备“\\.\Global\vmx86“
前几项与Win7配置相同用管理员模式打开CMD 运行 net start vmci net start vmx86 net start VMnetuserif 这三条命令为了不用每次启动都这样,修 ...
分享一个关于jackson的Json工具类
直接贴代码: import org.codehaus.jackson.map.DeserializationConfig.Feature; import org.codehaus.jackson.ma ...

html5 拖曳功能的实现[转]

html5 拖曳功能的实现[转]的更多相关文章

随机推荐

热门专题