思洋互动网站建设学前班

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 += '<a id="'+iObj+'" draggable="true"><img src="'+oldSrc+'" /></a>';  
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