UDN-企业互联网技术人气社区

板块导航

浏览  : 1316
回复  : 2

[资源] HTML5 拖放(Drag和drop)【更新百度网盘下载附件】

[复制链接]
令狐的头像 楼主
发表于 2015-5-6 16:40:49 | 显示全部楼层 |阅读模式
本帖最后由 令狐 于 2015-7-13 11:01 编辑
      在工作当中,我们会常常见到像UC浏览器的新选项卡一样的可以自定义拖拽摆放效果。大的像淘宝的装修,QQ空间装扮等,小到一些游戏等等随处可见拖放的使用场景。在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。拖放是一种常见的特性,即抓取对象以后拖到另一个位置。

  • 目前浏览器支持情况:Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。注释:在 Safari 5.1.2 中不支持拖放。
  • 下面看看一个具体的字母拖放demo:

效果.png

效果图



  • 实例代码:

  1. <!DOCTYPE HTML>
  2. <html>
  3.   <head>
  4.    <meta charset="gbk"/>
  5.    <title>HTML5 拖放(Drag和drop)</title>
  6.    <style>
  7.     html,body{width:100%;height:100%;background-color:gray;}
  8.     .wrapper{ width:500px;margin:0px auto;margin-top:80px;}
  9.     ul{list-style:none;width:500px;}
  10.     li{float:left;margin:0px 20px 20px 0px;position: relative;width:132px;height:132px;}
  11.     img{border-radius:12px;width:100px;height:100px;position: relative;-moz-user-select:none;cursor: move;}
  12.     .rubbish{position:absolute;bottom:80px;background:url("empty.png")
  13.        no-repeat;width:128px;height:128px;left:50%;margin-left:-64px;}
  14.     .hover{border:3px dashed #fff;}
  15.     </style>
  16. </head>
  17. <body>
  18. <div class="wrapper">
  19.   <ul>
  20.    <li draggable="true"><img src="1.png"/></li>
  21.    <li draggable="true"><img src="2.png"/></li>
  22.    <li draggable="true"><img src="3.png"/></li>
  23.    <li draggable="true"><img src="4.png"/></li>
  24.    <li draggable="true"><img src="5.png"/></li>
  25.    <li draggable="true"><img src="6.png"/></li>
  26.    <li draggable="true"><img src="7.png"/></li>
  27.    <li draggable="true"><img src="8.png"/></li>
  28.    <li draggable="true"><img src="9.png"/></li>
  29.    <li draggable="true"><img src="10.png"/></li>
  30.    <li draggable="true"><img src="11.png"/></li>
  31.    <li draggable="true"><img src="12.png"/></li>
  32.    <!-- <li draggable="true"><img src="13.png"/></li>
  33.    <li draggable="true"><img src="14.png"/></li>
  34.    <li draggable="true"><img src="15.png"/></li>
  35.    <li draggable="true"><img src="16.png"/></li>
  36.    <li draggable="true"><img src="17.png"/></li>
  37.    <li draggable="true"><img src="18.png"/></li>
  38.    <li draggable="true"><img src="19.png"/></li>
  39.    <li draggable="true"><img src="20.png"/></li>
  40.    <li draggable="true"><img src="21.png"/></li>
  41.    <li draggable="true"><img src="22.png"/></li>
  42.    <li draggable="true"><img src="23.png"/></li>
  43.    <li draggable="true"><img src="24.png"/></li>
  44.    <li draggable="true"><img src="25.png"/></li>
  45.    <li draggable="true"><img src="26.png"/></li> -->
  46. </ul>
  47. </div>
  48. <script>
  49.   var imgarrs = document.querySelectorAll("img");
  50.   var dragnow=null;//目前被拽着的物体
  51.   for(var i=0;i< imgarrs.length;i++ ){
  52.       addHandler(imgarrs[i],'dragstart',dragstart);
  53.       addHandler(imgarrs[i],'dragenter',dragenter);
  54.       addHandler(imgarrs[i],'dragover',dragover);
  55.       addHandler(imgarrs[i],'dragleave',dragleave);
  56.       addHandler(imgarrs[i],'drop',drop);
  57.       addHandler(imgarrs[i],'dragend',dragend);
  58.    }
  59.    function addHandler(node,type,handler){
  60.       if(window.addEventListener){
  61.             node.addEventListener(type,handler,false);
  62.       }else if(window.attachEvent){
  63.             node.attachEvent('on'+type,handler);
  64.       }
  65.    }
  66.                
  67.    function dragstart(e){//被拖拽元素
  68.      if(typeof e.target.style.opacity!='undefined'){
  69.          e.target.style.opacity='0.4';
  70.      }else{
  71.          e.target.style.filter = "alpha(opacity=40)";        
  72.      }
  73.    
  74.      addClass(e.target,"zIndex");
  75.      e.dataTransfer.setData("text",e.target.src);//存储图片的src
  76.      dragnow=e.target;//目前被拽的物体
  77.    }
  78.    
  79.     function dragover(e){//拖拽目标身上的效果
  80.        e.preventDefault();
  81.        e.dataTransfer.dropEffect='move';
  82.     }
  83.    
  84.     function dragenter(e){
  85.        if(e.stopPropagation){e.stopPropagation();}
  86.           if(typeof e.target.classList !='undefined'){
  87.              e.target.classList.add('hover');
  88.           }else{
  89.              addClass(e.target,"hover");
  90.           }
  91.        }
  92.    
  93.         function dragleave(e){
  94.        removeClass(e.target,"hover");
  95.     }
  96.    
  97.         function drop(e){
  98.        var src = e.dataTransfer.getData("text");//获取src
  99.        e.preventDefault();
  100.        if(e.stopPropagation){
  101.           e.stopPropagation();
  102.        }else if(e.attachEvent){
  103.           e.cancelBubble=true;
  104.        }
  105.        if(dragnow == e.target){
  106.           removeClass(e.target,"hover");
  107.           removeClass(e.target,"zIndex");
  108.           return;
  109.       }else{//如果拽着的元素与被拽着的元素一样,不用处理
  110.          dragnow.src = e.target.src;
  111.          e.target.src = src;
  112.          removeClass(e.target,"hover");
  113.          removeClass(e.target,"zIndex");
  114.       }
  115.      }
  116.    
  117.          function dragend(e){
  118.         e.preventDefault();
  119.         if(typeof e.target.style.opacity!='undefined'){
  120.            e.target.style.opacity='1';
  121.         }else{
  122.            e.target.style.filter = "alpha(opacity=100)";        
  123.         }//针对FF 在dragend 时候阻止冒泡
  124.            removeClass(e.target,"zIndex");
  125.         }//发生在被拖拽物体身上
  126.                
  127.      function addClass(node,newclass){
  128.        if(node.className.indexOf(newclass)>0){
  129.             return;
  130.        }
  131.        node.className = node.className?node.className+" "+newclass:newclass;
  132.     }
  133.    
  134.         function removeClass(node,className){
  135.         if(typeof node.classList !='undefined'){
  136.           node.classList.remove(className);
  137.         }else{
  138.           var classarr = node.className.split(/\s+/);
  139.           var arr = [];
  140.           for( var i=0;i< classarr.length;i++ ){
  141.              if(classarr[i] == className)continue;
  142.              arr.push(classarr[i]);
  143.           }
  144.           node.className = arr.join(" ");
  145.        }
  146.     }
  147. </script>
  148. </body>
  149. </html>
复制代码

源码下载【百度网盘下载】:http://pan.baidu.com/s/1bndMRTX

相关帖子

发表于 2015-5-28 12:29:07 | 显示全部楼层
实用的HTML5案列,  收藏备用。
使用道具 举报

回复

发表于 2015-5-28 18:42:27 | 显示全部楼层
同意楼上,收藏备用
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部