HTML5 拖拽復制功能的實現(xiàn)
更新時間：2016年09月29日 08:38:27 作者：請叫我頭頭哥
這篇文章主要介紹了HTML5 拖拽復制功能的實現(xiàn)的相關資料,需要的朋友可以參考下
拖拽是一種常見的特性，即抓取對象以后拖到另一個位置。 在 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);即可
通過此文，希望能幫助到大家，謝謝大家對本站的支持！
相關文章
Idea 2019.3 本應該搜索到的插件卻搜索不到的解決方法
這篇文章主要介紹了Idea 2019.3 本應該搜索到的插件卻搜索不到,本文通過圖文并茂的形式給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
Chrome 51 開始，瀏覽器的 Cookie 新增加了一個SameSite屬性，用來防止 CSRF 攻擊和用戶追蹤，下面在通過本文給大家詳細介紹下SameSite 屬性的相關知識，感興趣的朋友一起看看吧2021-10-10
Sublime?Text?4?安裝Package?Control的詳細步驟
最近換了臺電腦安裝了Sublime?Text?4但是按照之前的方法Package?Control怎么也安裝不上，查閱很多資料多次嘗試發(fā)現(xiàn)Sublime?Text?4可以直接安裝不需要之前那些步驟，下面小編把安裝步驟分享給大家，需要的朋友參考下吧2022-01-01
VSCode 使用Settings Sync同步配置(最新版教程,非常簡單)
這篇文章主要介紹了VSCode 使用Settings Sync同步配置(最新版教程,非常簡單)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
這篇文章主要介紹了git設置用戶名密碼的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
手把手教你將Vim改裝成一個IDE編程環(huán)境(圖文) 吳垠
這篇文章主要介紹了手把手教你將Vim改裝成一個IDE編程環(huán)境(圖文) 吳垠 ,需要的朋友可以參考下2016-01-01
VScode?隱藏大量無用的文件比如在看Linux?kernel或boot時候
這篇文章主要介紹了VScode?隱藏大量無用的文件比如在看Linux?kernel或boot時候,VScode 工程創(chuàng)建先在 Ubuntu 下編譯一下 uboot，然后將編譯后的 uboot 文件夾復制到 windows 下，并創(chuàng)建VScode 工程，需要的朋友可以參考下2022-10-10
這篇文章主要介紹了IDEA怎么切換Git分支的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-08-08
這篇文章主要介紹了VS2019如何查看類圖的方法實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-08-08
你是否有過復查程序時發(fā)現(xiàn)有些注釋毫無用處？程序注釋是為了提高代碼的可讀性，為了讓原作者以外的其他開發(fā)人員更容易理解這段程序。2011-10-10