鲨鱼网
HTML 5实现的图片拖拽分组效果
创始人
2024-08-24 11:30:56
0次

分享一个HTML5的drag drop API实现的图片拖拽分组效果

在线演示 本地下载

今天我们介绍HTML5的拖拽功能。基本目前所有的现代浏览器(Firefox，Chrome，Safari，或者Opera)都支持这个实用的功能。这意味着我们可以考虑在我们的项目和网站中使用这个功能。更重要的是代码编写非常简单。我们这里将使用拖拽API开发一个图片的分组排序功能 ，希望能够给大家比较直观的使用感受。希望大家喜欢！

HTML标签

  1.  
  2.     
    Album 1
 
  •     

    Album 1

    •  
  •     

    Album 3

    •  
  •  
    •  
  •  
  •      
  •      
  •      
  •      
  •      
  •      
  •      
  •      
  •      
  •      
  •      
  •      
  •  
  •  

    • 你可以看到这里我们设定了3个开放的drop对象和12个图片。我们将可drop的区域使用属性droppable来标示，并且将可drag的对象用draggable来标示。

    CSS代码

    接下来我们设置页面的样式。

    1. /* Photo Gallery styles */ 
    2. .gallery {  
    3.     margin: 50px auto 0;  
    4.     width: 840px;  
    5. }  
    6. .gallery a {  
    7.     display: inline-block;  
    8.     height: 135px;  
    9.     margin: 10px;  
    10.     opacity: 1;  
    11.     position: relative;  
    12.     width: 180px;  
    13.  
    14.     -khtml-user-drag: element;  
    15.  
    16.     /* CSS3 Prevent selections */ 
    17.     -moz-user-select: none;  
    18.     -webkit-user-select: none;  
    19.     -khtml-user-select: none;  
    20.     user-select: none;  
    21.  
    22.     /* CSS3 transition rules */ 
    23.     -webkit-transition: all 0.5s ease;  
    24.     -moz-transition: all 0.5s ease;  
    25.     -o-transition: all 0.5s ease;  
    26.     transition: all 0.5s ease;  
    27. }  
    28. .gallery a img {  
    29.     border: 8px solid #fff;  
    30.     border-bottom: 20px solid #fff;  
    31.     cursor: pointer;  
    32.     display: block;  
    33.     height: 100%;  
    34.     left: 0px;  
    35.     position: absolute;  
    36.     top: 0px;  
    37.     width: 100%;  
    38.     z-index: 1;  
    39.  
    40.     /* CSS3 Box sizing property */ 
    41.     -moz-box-sizing: border-box;  
    42.     -webkit-box-sizing: border-box;  
    43.     -o-box-sizing: border-box;  
    44.     box-sizing: border-box;  
    45.  
    46.     /* CSS3 transition rules */ 
    47.     -webkit-transition: all 0.5s ease;  
    48.     -moz-transition: all 0.5s ease;  
    49.     -o-transition: all 0.5s ease;  
    50.     transition: all 0.5s ease;  
    51.  
    52.     /* CSS3 Box Shadow */ 
    53.     -moz-box-shadow: 2px 2px 4px #444;  
    54.     -webkit-box-shadow: 2px 2px 4px #444;  
    55.     -o-box-shadow: 2px 2px 4px #444;  
    56.     box-shadow: 2px 2px 4px #444;  
    57. }  
    58.  
    59. /* Custom CSS3 rotate transformation */ 
    60. .gallery a:nth-child(1) img {  
    61.     -moz-transform: rotate(-25deg);  
    62.     -webkit-transform: rotate(-25deg);  
    63.     transform: rotate(-25deg);  
    64. }  
    65. .gallery a:nth-child(2) img {  
    66.     -moz-transform: rotate(-20deg);  
    67.     -webkit-transform: rotate(-20deg);  
    68.     transform: rotate(-20deg);  
    69. }  
    70. .gallery a:nth-child(3) img {  
    71.     -moz-transform: rotate(-15deg);  
    72.     -webkit-transform: rotate(-15deg);  
    73.     transform: rotate(-15deg);  
    74. }  
    75. .gallery a:nth-child(4) img {  
    76.     -moz-transform: rotate(-10deg);  
    77.     -webkit-transform: rotate(-10deg);  
    78.     transform: rotate(-10deg);  
    79. }  
    80. .gallery a:nth-child(5) img {  
    81.     -moz-transform: rotate(-5deg);  
    82.     -webkit-transform: rotate(-5deg);  
    83.     transform: rotate(-5deg);  
    84. }  
    85. .gallery a:nth-child(6) img {  
    86.     -moz-transform: rotate(0deg);  
    87.     -webkit-transform: rotate(0deg);  
    88.     transform: rotate(0deg);  
    89. }  
    90. .gallery a:nth-child(7) img {  
    91.     -moz-transform: rotate(5deg);  
    92.     -webkit-transform: rotate(5deg);  
    93.     transform: rotate(5deg);  
    94. }  
    95. .gallery a:nth-child(8) img {  
    96.     -moz-transform: rotate(10deg);  
    97.     -webkit-transform: rotate(10deg);  
    98.     transform: rotate(10deg);  
    99. }  
    100. .gallery a:nth-child(9) img {  
    101.     -moz-transform: rotate(15deg);  
    102.     -webkit-transform: rotate(15deg);  
    103.     transform: rotate(15deg);  
    104. }  
    105. .gallery a:nth-child(10) img {  
    106.     -moz-transform: rotate(20deg);  
    107.     -webkit-transform: rotate(20deg);  
    108.     transform: rotate(20deg);  
    109. }  
    110. .gallery a:nth-child(11) img {  
    111.     -moz-transform: rotate(25deg);  
    112.     -webkit-transform: rotate(25deg);  
    113.     transform: rotate(25deg);  
    114. }  
    115. .gallery a:nth-child(12) img {  
    116.     -moz-transform: rotate(30deg);  
    117.     -webkit-transform: rotate(30deg);  
    118.     transform: rotate(30deg);  
    119. }  
    120. .gallery a:hover img {  
    121.     z-index: 5;  
    122.  
    123.     /* CSS3 transition rules */ 
    124.     -webkit-transition: all 0.5s ease;  
    125.     -moz-transition: all 0.5s ease;  
    126.     -o-transition: all 0.5s ease;  
    127.     transition: all 0.5s ease;  
    128.  
    129.     /* CSS3 transform rules */ 
    130.     -moz-transform: rotate(0deg);  
    131.     -webkit-transform: rotate(0deg);  
    132.     -o-transform: rotate(0deg);  
    133.     transform: rotate(0deg);  
    134. }  
    135. .gallery a.hidden {  
    136.     height: 0;  
    137.     margin: 0;  
    138.     opacity: 0;  
    139.     width: 0;  
    140. }  
    141. .albums {  
    142.     margin: 40px auto 0;  
    143.     overflow: hidden;  
    144.     width: 840px;  
    145. }  
    146. .album {  
    147.     border: 3px dashed #ccc;  
    148.     float: left;  
    149.     margin: 10px;  
    150.     min-height: 100px;  
    151.     padding: 10px;  
    152.     width: 220px;  
    153.  
    154.     /* CSS3 transition rules */ 
    155.     -webkit-transition: all 1.0s ease;  
    156.     -moz-transition: all 1.0s ease;  
    157.     -o-transition: all 1.0s ease;  
    158.     transition: all 1.0s ease;  
    159. }  
    160. .album a {  
    161.     display: inline-block;  
    162.     height: 56px;  
    163.     margin: 15px;  
    164.     opacity: 1;  
    165.     position: relative;  
    166.     width: 75px;  
    167.  
    168.     -khtml-user-drag: element;  
    169.     -webkit-user-drag: element;  
    170.     -khtml-user-select: none;  
    171.     -webkit-user-select: none;  
    172.  
    173.     /* CSS3 Prevent selections */ 
    174.     -moz-user-select: none;  
    175.     -webkit-user-select: none;  
    176.     -khtml-user-select: none;  
    177.     user-select: none;  
    178.  
    179.     /* CSS3 transition rules */ 
    180.     -webkit-transition: all 0.5s ease;  
    181.     -moz-transition: all 0.5s ease;  
    182.     -o-transition: all 0.5s ease;  
    183.     transition: all 0.5s ease;  
    184. }  
    185. .album a img {  
    186.     border: 4px solid #fff;  
    187.     border-bottom: 10px solid #fff;  
    188.     cursor: pointer;  
    189.     display: block;  
    190.     height: 100%;  
    191.     left: 0px;  
    192.     position: absolute;  
    193.     top: 0px;  
    194.     width: 100%;  
    195.     z-index: 1;  
    196.  
    197.     /* CSS3 Box sizing property */ 
    198.     -moz-box-sizing: border-box;  
    199.     -webkit-box-sizing: border-box;  
    200.     -o-box-sizing: border-box;  
    201.     box-sizing: border-box;  
    202.  
    203.     /* CSS3 transition rules */ 
    204.     -webkit-transition: all 0.5s ease;  
    205.     -moz-transition: all 0.5s ease;  
    206.     -o-transition: all 0.5s ease;  
    207.     transition: all 0.5s ease;  
    208.  
    209.     /* CSS3 Box Shadow */ 
    210.     -moz-box-shadow: 2px 2px 4px #444;  
    211.     -webkit-box-shadow: 2px 2px 4px #444;  
    212.     -o-box-shadow: 2px 2px 4px #444;  
    213.     box-shadow: 2px 2px 4px #444;  
    214. }  

    #p#

    Javascript代码

    1. // add event handler  
    2. var addEvent = (function () {  
    3.   if (document.addEventListener) {  
    4.     return function (el, type, fn) {  
    5.       if (el && el.nodeName || el === window) {  
    6.         el.addEventListener(type, fn, false);  
    7.       } else if (el && el.length) {  
    8.         for (var i = 0; i < el.length; i++) {  
    9.           addEvent(el[i], type, fn);  
    10.         }  
    11.       }  
    12.     };  
    13.   } else {  
    14.     return function (el, type, fn) {  
    15.       if (el && el.nodeName || el === window) {  
    16.         el.attachEvent('on' + type, function () { return fn.call(el, window.event); });  
    17.       } else if (el && el.length) {  
    18.         for (var i = 0; i < el.length; i++) {  
    19.           addEvent(el[i], type, fn);  
    20.         }  
    21.       }  
    22.     };  
    23.   }  
    24. })();  
    25.  
    26. // inner variables  
    27. var dragItems;  
    28. updateDataTransfer();  
    29. var dropAreas = document.querySelectorAll('[droppable=true]');  
    30.  
    31. // preventDefault (stops the browser from redirecting off to the text)  
    32. function cancel(e) {  
    33.   if (e.preventDefault) {  
    34.     e.preventDefault();  
    35.   }  
    36.   return false;  
    37. }  
    38.  
    39. // update event handlers  
    40. function updateDataTransfer() {  
    41.     dragItems = document.querySelectorAll('[draggable=true]');  
    42.     for (var i = 0; i < dragItems.length; i++) {  
    43.         addEvent(dragItems[i], 'dragstart', function (event) {  
    44.             event.dataTransfer.setData('obj_id', this.id);  
    45.             return false;  
    46.         });  
    47.     }  
    48. }  
    49.  
    50. // dragover event handler  
    51. addEvent(dropAreas, 'dragover', function (event) {  
    52.     if (event.preventDefault) event.preventDefault();  
    53.  
    54.     // little customization  
    55.     this.style.borderColor = "#000";  
    56.     return false;  
    57. });  
    58.  
    59. // dragleave event handler  
    60. addEvent(dropAreas, 'dragleave', function (event) {  
    61.     if (event.preventDefault) event.preventDefault();  
    62.  
    63.     // little customization  
    64.     this.style.borderColor = "#ccc";  
    65.     return false;  
    66. });  
    67.  
    68. // dragenter event handler  
    69. addEvent(dropAreas, 'dragenter', cancel);  
    70.  
    71. // drop event handler  
    72. addEvent(dropAreas, 'drop', function (event) {  
    73.     if (event.preventDefault) event.preventDefault();  
    74.  
    75.     // get dropped object  
    76.     var iObj = event.dataTransfer.getData('obj_id');  
    77.     var oldObj = document.getElementById(iObj);  
    78.  
    79.     // get its image src  
    80.     var oldSrc = oldObj.childNodes[0].src;  
    81.     oldObj.className += 'hidden';  
    82.  
    83.     var oldThis = this;  
    84.  
    85.     setTimeout(function() {  
    86.         oldObj.parentNode.removeChild(oldObj); // remove object from DOM  
    87.  
    88.         // add similar object in another place  
    89.         oldThis.innerHTML += '';  
    90.  
    91.         // and update event handlers  
    92.         updateDataTransfer();  
    93.  
    94.         // little customization  
    95.         oldThis.style.borderColor = "#ccc";  
    96.     }, 500);  
    97.  
    98.     return false;  
    99. });  

    可以看到以上代码并不复杂。开始我们选择所有的可拖放的元素。然后将’dragstart’事件绑定到所有的draggable元素上，这样讲数据设定到dataTransfer对象中。对于所有的droppable区域我们绑定这些事件：’dragover’,'dragleave’和’drop’。针对前两个方法我们执行一个小的CSS自定义来激活drop区域。当我们放置可拖放的元素的时候，我们的脚本会复制可拖放元素并且将它们放置到活动的droppable区域（即相册），并且删除那个dropped元素。最后我们更新事件处理。

    希望大家喜欢这个HTML5的图片拖放展示效果。

    原文链接：http://www.mhtml5.com/2012/05/4941.html

    【编辑推荐】

    1. HTML 5开发RPG游戏之一（地图人物实现）
    2. HTML 5开发RPG游戏之二（跑起来吧英雄）
    3. HTML 5开发RPG游戏之三（卷轴和对话）
    4. HTML 5开发RPG游戏之四（游戏脚本化）
    5. HTML 5游戏开发实用建议

    上一篇：Windows Phone应用提交攻略（图文详解）

    下一篇：OpenStack发布Essex-3版本

    相关内容

    热门资讯

    如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下，MySQL服务器仅侦听来自localhos...
    如何利用交换机和端口设置来管理... 在网络管理中，总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
    各种千兆交换机的数据接口类型详... 千兆交换机有很多值得学习的地方，这里我们主要介绍各种千兆交换机的数据接口类型，作为局域网的主要连接设...
    施耐德电气数据中心整体解决方案... 近日，全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”，作为该活动的...
    Windows恶意软件20年“... 在Windows的早期年代，病毒游走于系统之间，偶尔删除文件（但被删除的文件几乎都是可恢复的），并弹...
    规避非法攻击 用好路由器远程管... 单位在市区不同位置设立了科技服务点，每一个服务点的员工都通过宽带路由器进行共享上网，和单位网络保持联...
    范例解读VB.NET获取环境变... VB.NET编程语言的使用范围非常广泛，可以帮助开发人员处理各种程序中的需求，而且还能对移动设备进行...
    20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
    2009 IBM动态架构新动力...
    通过 XML 进行内容发布