拖拽是一種常見的特性，即抓取對象以后拖到另一個位置。在 HTML5 中，拖拽是標準的一部分，任何元素都能夠拖拽。 Html5拖拽非常常見的一個功能，但是大部分拖拽的案例都是一個剪切的過程，項目中需要實現(xiàn)Html5拖拽復制的功能，Html5拖拽復制很簡單，只需要在普通Html5拖拽的過程中做一點小小的改動即可。

ps: 本篇博文為非首頁文章,只是簡單的筆記。

瀏覽器支持

Internet Explorer 9
Firefox
Opera 12
Chrome
Safari 5

v1.0代碼部分

<!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>

代碼解析

實現(xiàn)思路就是克隆被拖拽的元素，然后把克隆元素appendChild()到指定位置

實現(xiàn)Html5拖拽復制的核心代碼.cloneNode()

Html5拖拽復制完成以后，其實還有很多事情可以在appendChild()執(zhí)行以后完成，這個看具體需求吧

如果只是想實現(xiàn)傳統(tǒng)的HTML5拖拽的話，移除var item = document.getElementById(data).cloneNode();，然后ev.target.appendChild(data);即可

通過此文，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章:

如何在Linux?系統(tǒng)中使用apt?包管理器安裝?Git?LFS
Git LFS是一個開源擴展，用于解決Git在處理大型文件時的效率和性能問題，這篇文章主要介紹了在?Linux系統(tǒng)中使用apt包管理器來安裝Git LFS的問題,需要的朋友可以參考下
2023-05-05
網(wǎng)絡抓包工具wireshark入門教程詳解
Wireshark是一個網(wǎng)絡數(shù)據(jù)包分析軟件,功能非常強大，奈何他是英文版的，今天就為大家詳細介紹一下網(wǎng)絡抓包工具wireshark的使用教程
2018-10-10
Tortoise Git(烏龜git)常用命令總結
Git作為一個復雜的版本控制系統(tǒng),命令之多,即使經(jīng)常使用,一些命令也記不住,一般只記住幾個常用的命令,本文主要介紹了Tortoise Git(烏龜git)常用命令總結,具有一定的參考價值,感興趣的可以了解一下
2023-08-08
詳解文法的定義與分類(編譯原理)
計算機的語言具有嚴格的語法、語義,易于形式化的特征,這篇文章主要介紹了詳解文法的定義與分類(編譯原理),本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-08-08
在 git 中取消 __pycache__ 文件的方法
_pycache__ 文件夾是 Python 編譯器用來存放編譯后的 Python 文件的，在項目中不需要提交這些文件，因為它們可以通過編譯源代碼重新生成，這篇文章主要介紹了如何在 git 中取消 __pycache__ 文件,需要的朋友可以參考下
2023-01-01
Git 2.27.0詳細安裝步驟詳解
這篇文章主要介紹了Git 2.27.0詳細安裝步驟,本文通過圖文并茂的形式給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-08-08
Linux/Ubuntu Git從安裝到使用的方法步驟
這篇文章主要介紹了Linux/Ubuntu Git從安裝到使用的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-04-04
VS?Code快速生成html(頭部)模板圖文教程
這篇文章主要給大家介紹了關于VS?Code快速生成html(頭部)模板的相關資料,為了避免簡單的重復勞動,借助VSCODE 快速生成文件頭部,在項目搭建中體驗非常舒適,需要的朋友可以參考下
2023-11-11
VScode中集成Git命令詳解
本文詳細講解了VScode中集成Git命令的方法，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-06-06
搭建一個開源項目兩種方式安裝git的詳細教程
這篇文章主要介紹了搭建一個開源項目兩種方式安裝git，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-08-08