JS拖拽图片简单实例
作者:admin 时间:2021-5-20 16:52:49 浏览:JS拖拽图片在网页交互操作中比较常见，本文介绍利用JS拖拽图片的简单实例。
JS拖拽图片
概述
在这段代码中，我们将尝试使用JavaScript进行“简单拖拽图片”，该程序将使你可以将图片拖拽到其他位置，这段代码的技巧是将每个div元素与一个id绑定在一起，然后在ondragstart事件中接收一个绑定的图片。要了解更多有关此内容的信息，请按照以下步骤操作。
开始
本实例使用了bootstrap框架设计布局，相关文件可在源码压缩包里找到，当然你也可以不用这个布局，那么无需用到bootstrap的css代码。
主界面HTML
要创建此代码，只需在文本编辑器中编写这些代码块，然后将其另存为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://www.webkaka.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的文件，这个是页面布局设计文件，在你的自创页面设计中不一定要用到。
2、代码引用的script.js文件，内容即是后面介绍的js代码，这些js代码可以直接写到html代码里而无需单独一个文件。
3、实例里的图片文件名是img.png，位置与index.html同目录。在你的应用中注意写对图片位置及文件名。
JS脚本
该代码将允许你对图片元素进行拖拽事件，为此，只需在文本编辑器中复制并编写这些代码块，然后将其另存为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创建了简单的拖拽图片功能。
总结
本文介绍了利用JS拖拽图片的简单实例，我希望这个简单的教程可以帮助你找到所需的内容。
标签: drop方法 drag方法 dragOver方法 拖拽图片
- 站长推荐
