欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML5 拖拽復(fù)制功能的實(shí)現(xiàn)

 更新時(shí)間：2016年09月29日 08:38:27   作者：請(qǐng)叫我頭頭哥  
這篇文章主要介紹了HTML5 拖拽復(fù)制功能的實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下

拖拽是一種常見(jiàn)的特性，即抓取對(duì)象以后拖到另一個(gè)位置。 在 HTML5 中，拖拽是標(biāo)準(zhǔn)的一部分，任何元素都能夠拖拽。 Html5拖拽非常常見(jiàn)的一個(gè)功能，但是大部分拖拽的案例都是一個(gè)剪切的過(guò)程， 項(xiàng)目中需要實(shí)現(xiàn)Html5拖拽復(fù)制的功能，Html5拖拽復(fù)制很簡(jiǎn)單，只需要在普通Html5拖拽的過(guò)程中做一點(diǎn)小小的改動(dòng)即可。

ps: 本篇博文為非首頁(yè)文章,只是簡(jiǎn)單的筆記。

瀏覽器支持

  1. Internet Explorer 9
  2. Firefox
  3. Opera 12
  4. Chrome
  5. 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>請(qǐng)把 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>

代碼解析

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

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

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

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

通過(guò)此文，希望能幫助到大家，謝謝大家對(duì)本站的支持！

相關(guān)文章

  • 如何在Linux?系統(tǒng)中使用apt?包管理器安裝?Git?LFS

    如何在Linux?系統(tǒng)中使用apt?包管理器安裝?Git?LFS

    Git LFS是一個(gè)開(kāi)源擴(kuò)展，用于解決Git在處理大型文件時(shí)的效率和性能問(wèn)題，這篇文章主要介紹了在?Linux系統(tǒng)中使用apt包管理器來(lái)安裝Git LFS的問(wèn)題,需要的朋友可以參考下
    2023-05-05
  • 網(wǎng)絡(luò)抓包工具wireshark入門教程詳解

    網(wǎng)絡(luò)抓包工具wireshark入門教程詳解

    Wireshark是一個(gè)網(wǎng)絡(luò)數(shù)據(jù)包分析軟件,功能非常強(qiáng)大，奈何他是英文版的，今天就為大家詳細(xì)介紹一下網(wǎng)絡(luò)抓包工具wireshark的使用教程
    2018-10-10
  • Tortoise Git(烏龜git)常用命令總結(jié)

    Tortoise Git(烏龜git)常用命令總結(jié)

    Git作為一個(gè)復(fù)雜的版本控制系統(tǒng),命令之多,即使經(jīng)常使用,一些命令也記不住,一般只記住幾個(gè)常用的命令,本文主要介紹了Tortoise Git(烏龜git)常用命令總結(jié),具有一定的參考價(jià)值,感興趣的可以了解一下
    2023-08-08
  • 詳解文法的定義與分類(編譯原理)

    詳解文法的定義與分類(編譯原理)

    計(jì)算機(jī)的語(yǔ)言具有嚴(yán)格的語(yǔ)法、語(yǔ)義,易于形式化的特征,這篇文章主要介紹了詳解文法的定義與分類(編譯原理),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2023-08-08
  • 在 git 中取消 __pycache__ 文件的方法

    在 git 中取消 __pycache__ 文件的方法

    _pycache__ 文件夾是 Python 編譯器用來(lái)存放編譯后的 Python 文件的，在項(xiàng)目中不需要提交這些文件，因?yàn)樗鼈兛梢酝ㄟ^(guò)編譯源代碼重新生成，這篇文章主要介紹了如何在 git 中取消 __pycache__ 文件,需要的朋友可以參考下
    2023-01-01
  • Git 2.27.0詳細(xì)安裝步驟詳解

    Git 2.27.0詳細(xì)安裝步驟詳解

    這篇文章主要介紹了Git 2.27.0詳細(xì)安裝步驟,本文通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-08-08
  • Linux/Ubuntu Git從安裝到使用的方法步驟

    Linux/Ubuntu Git從安裝到使用的方法步驟

    這篇文章主要介紹了Linux/Ubuntu Git從安裝到使用的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-04-04
  • VS?Code快速生成html(頭部)模板圖文教程

    VS?Code快速生成html(頭部)模板圖文教程

    這篇文章主要給大家介紹了關(guān)于VS?Code快速生成html(頭部)模板的相關(guān)資料,為了避免簡(jiǎn)單的重復(fù)勞動(dòng),借助VSCODE 快速生成文件頭部,在項(xiàng)目搭建中體驗(yàn)非常舒適,需要的朋友可以參考下
    2023-11-11
  • VScode中集成Git命令詳解

    VScode中集成Git命令詳解

    本文詳細(xì)講解了VScode中集成Git命令的方法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2022-06-06
  • 搭建一個(gè)開(kāi)源項(xiàng)目?jī)煞N方式安裝git的詳細(xì)教程

    搭建一個(gè)開(kāi)源項(xiàng)目?jī)煞N方式安裝git的詳細(xì)教程

    這篇文章主要介紹了搭建一個(gè)開(kāi)源項(xiàng)目?jī)煞N方式安裝git，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-08-08

最新評(píng)論