拖拽是一種常見的特性，即抓取對象以后拖到另一個位置。 在 HTML5 中，拖拽是標準的一部分，任何元素都能夠拖拽。 Html5拖拽非常常見的一個功能，但是大部分拖拽的案例都是一個剪切的過程， 項目中需要實現Html5拖拽復制的功能，Html5拖拽復制很簡單，只需要在普通Html5拖拽的過程中做一點小小的改動即可。
ps: 本篇博文為非首頁文章,只是簡單的筆記。
瀏覽器支持
- Internet Explorer 9
- Firefox
- Opera 12
- Chrome
- Safari 5
v1.0代碼部分
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<!DOCTYPE html><html><head> <styletype="text/css"> #div1 { width: 700px; height: 120px; padding: 10px; border: 1px solid #aaaaaa; } #drag1 { cursor:pointer; } </style> <scripttype="text/javascript"> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("Text"); var item = document.getElementById(data).cloneNode(); ev.target.appendChild(item); } </script></head><body> <p>請把 Windows Azure 的圖片拖放到矩形中：</p> <divid="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br/> <br/> <br/> <br/> <br/> <imgid="drag1" src="http://www.cnblogs.com/images/cnblogs_com/toutou/699740/t_Azure.png" draggable="true" ondragstart="drag(event)"/></body></html> |
代碼解析
實現思路就是克隆被拖拽的元素，然后把克隆元素appendChild()到指定位置
實現Html5拖拽復制的核心代碼.cloneNode()
Html5拖拽復制完成以后，其實還有很多事情可以在appendChild()執行以后完成，這個看具體需求吧
如果只是想實現傳統的HTML5拖拽的話，移除var item = document.getElementById(data).cloneNode();，然后ev.target.appendChild(data);即可
通過此文，希望能幫助到大家，謝謝大家對本站的支持！
