|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
JS拖拽圖片簡單實例
作者:admin 時間:2021-5-20 16:52:49 瀏覽:JS拖拽圖片在網(wǎng)頁交互操作中比較常見，本文介紹利用JS拖拽圖片的簡單實例。
JS拖拽圖片
概述
在這段代碼中，我們將嘗試使用JavaScript進行“簡單拖拽圖片”，該程序?qū)⑹鼓憧梢詫D片拖拽到其他位置，這段代碼的技巧是將每個div元素與一個id綁定在一起，然后在ondragstart事件中接收一個綁定的圖片。要了解更多有關(guān)此內(nèi)容的信息，請按照以下步驟操作。
開始
本實例使用了bootstrap框架設(shè)計布局，相關(guān)文件可在源碼壓縮包里找到，當(dāng)然你也可以不用這個布局，那么無需用到bootstrap的css代碼。
主界面HTML
要創(chuàng)建此代碼，只需在文本編輯器中編寫這些代碼塊，然后將其另存為index.html即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand" href="http://m.gazebo2go.com/tutorial/js/2021/052077/">
<strong>« 返回文章: </strong>使用JavaScript拖放圖片
</a>
</div>
</nav>
<div class="col-md-3"></div>
<div class="col-md-6 well">
<h3 class="text-primary">使用JavaScript拖放圖片</h3>
<hr style="border-top:1px dotted #ccc;"/>
<div class="col-md-5" style="border:1px SOLID #ccc; height:250px;" ondrop="drop(event)" ondragover="dragOver(event)"><h4>Table 1</h4></div>
<center><img src="img.png" id="image" height="200" width="300" draggable="true" ondragstart="drag(event)"/></center>
<br style="clear:both;"/>
<br />
<div class="col-md-5" style="border:1px SOLID #ccc; height:250px;" ondrop="drop(event)" ondragover="dragOver(event)"><h4>Table 2</h4></div>
</div>
<script src="js/script.js"></script>
</body>
</html>
解釋
1、代碼引用了bootstrap.css的文件，這個是頁面布局設(shè)計文件，在你的自創(chuàng)頁面設(shè)計中不一定要用到。
2、代碼引用的script.js文件，內(nèi)容即是后面介紹的js代碼，這些js代碼可以直接寫到html代碼里而無需單獨一個文件。
3、實例里的圖片文件名是img.png，位置與index.html同目錄。在你的應(yīng)用中注意寫對圖片位置及文件名。
JS腳本
該代碼將允許你對圖片元素進行拖拽事件，為此，只需在文本編輯器中復(fù)制并編寫這些代碼塊，然后將其另存為js文件夾中的script.js。
function drop(e){
e.preventDefault();
var image = e.dataTransfer.getData("image");
e.target.appendChild(document.getElementById(image));
document.getElementById(image).style="width:100%;";
}
function dragOver(e){
e.preventDefault();
}
function drag(e){
e.dataTransfer.setData("image", e.target.id);
}
這樣，我們就能成功使用JS創(chuàng)建了簡單的拖拽圖片功能。
總結(jié)
本文介紹了利用JS拖拽圖片的簡單實例，我希望這個簡單的教程可以幫助你找到所需的內(nèi)容。
標(biāo)簽: drop方法 drag方法 dragOver方法 拖拽圖片
- 站長推薦
