技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

JS拖拽图片简单实例

作者:admin    时间:2021-5-20 16:52:49    浏览:

JS拖拽图片在网页交互操作中比较常见,本文介绍利用JS拖拽图片的简单实例。

JS拖拽图片

JS拖拽图片

demo

概述

在这段代码中,我们将尝试使用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="trueondragstart="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>

execcodegetcode

解释

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拖拽图片的简单实例,我希望这个简单的教程可以帮助你找到所需的内容。

相关文章
    x
    • 站长推荐
    /* 左侧显示文章内容目录 */