JavaScript拖拽图片一

最新推荐文章于 2021-10-07 18:49:24 发布
转载 最新推荐文章于 2021-10-07 18:49:24 发布 · 643 阅读 · 0

本文介绍了一种使用HTML和JavaScript实现图片拖拽的方法。通过监听鼠标事件并在页面上更新元素位置来实现这一功能。

本文演示如何将一张图片用鼠标拖拽到某个位置。

先看html代码：

[html]   view plain copy print ?
  1. <html>  
  2.   <head>  
  3.     <title>drag demo</title>  
  4.     <script src="js/drag.js" type="text/javascript"></script>  
  5.   </head>  
  6.   <body onload="init()">  
  7.     <div id="icon1"   
  8.      onmousedown="mouseDown(event)"  
  9.      style="left:1px; top: 1px; position: absolute;">  
  10.       <img alt="" border="0" src="/img/2.jpg"></img>  
  11.     </div>  
  12.   </body>  
  13. </html>  


注意，必须在style中指定三个属性:

left,top属性值可以为任意有效数值，position必须是absolute

为了便于扩展，将图片包装在div中，下面的JavaScript代码其实是拖动div。


然后看看drag.js文件：

[javascript]   view plain copy print ?
  1. function init() {  
  2.     window.document.onmousemove = mouseMove;  
  3.     window.document.onmouseup = mouseUp;  
  4.     window.document.ondragstart = mouseStop;  
  5. }  
  6.   
  7. function mouseDown(e) {  
  8.     window.dragObj = e.currentTarget;  
  9.     if (window.dragObj !== null) {  
  10.         window.clickLeft = window.event.x - parseInt(dragObj.style.left);  
  11.         window.clickTop = window.event.y - parseInt(dragObj.style.top);  
  12.         window.dragObj.style.zIndex += 1;  
  13.     }  
  14. }  
  15.   
  16. function mouseStop() {  
  17.     window.event.returnValue = false;  
  18. }  
  19.   
  20. function mouseMove() {  
  21.     if (window.dragObj !== null ) {  
  22.         window.dragObj.style.left = window.event.x - window.clickLeft;  
  23.         window.dragObj.style.top = window.event.y - window.clickTop;  
  24.     }  
  25. }  
  26.   
  27. function mouseUp() {  
  28.     window.dragObj = null;  
  29. }  

ondragStart事件被禁用。

主要就是mouseDown，mouseMove和mouseUp三个函数。

注意window.clickLeft和window.clickTop，它们是在点击图片的时候计算的，代表鼠标在图片里的位置（距离图片左上角的x和y值)。

它们用来保证在移动后鼠标仍然停留在图片的相对位置，通过将鼠标的位置减去这两个偏移值。


图片拖拽效果
远行的博客
03-19 1182
游戏中比较常见的拖拽效果，例如拖动技能icon或者其他道具icon到指定位置，松开之后，判断能否使用。 下面是用laya与as3实现拖拽效果的代码(需求是拖拽icon，并且，icon拖拽道具到指定位置时如果满足条件，该指定位置的item高亮显示) 先在UI编辑器里面给各个item添加name，博主这里假设icon只有2个，并给name分别赋值为icon0,icon1,对此，单纯的拖拽和松开鼠标...
javascript拖拽图片到指定位置
08-14
在JavaScript和jQuery的世界里，实现图片拖放至指定位置的功能是一项常见的交互设计，它能够提升用户的体验，使得操作更加直观和便捷。以下我们将详细探讨如何使用这两种技术来完成这一任务。 首先，我们需要理解...
JavaScript图片拖动效果
01-12
JavaScript图片拖动效果，纯粹的JS图片拖动效果！！
jquery拖拽图片
12-02
经过代码的调整，实现了不同行之间的拖拽和排序。以及获取src地址
JavaScript中拖拽图片
plannothing的博客
08-17 565
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; position: absolute; } #box2{ width:
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
10-15
同样地，当用户尝试拖动图片时，返回`false`以阻止拖拽行为： ```html ;"> ``` 对于文字，我们可以使用`onselectstart`事件来禁止文本选中，例如： ```html ;">文字禁止鼠标选中 ``` 另外，也可以通过`onselect`...
JavaScript实现图片的放大缩小及拖拽功能示例
10-17
同时，鼠标指针被设置为移动手势，提示用户可以拖动图片。 总的来说，这个示例通过JavaScript实现了图片的放大缩小和拖拽功能，主要涉及了鼠标事件的处理、CSS属性的获取与修改，以及元素定位的控制。这样的技术在...
javascript 网页编辑框及拖拽图片的问题
10-29
在本知识点中并未直接提供拖拽图片到编辑框的具体实现代码，但根据常见的网页开发经验，可以通过JavaScript的拖放API来实现这一功能。 在HTML5标准中，拖放（Drag and Drop）功能是通过一系列的DOM事件实现的，例如...
JavaScript实现文字与图片拖拽效果的方法
10-24
在本篇文档中，我们将重点探讨如何利用JavaScript技术实现文字与图片的拖拽效果。通过具体的代码实例，我们将深入了解整个实现过程，并学习到相关的操作技巧。 首先，我们来看一下实现文字与图片拖拽效果所涉及的...
JavaScript中拖拽
plannothing的博客
08-17 235
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; position: absolute; } #box2{ width:
javascript拖动(拖拽)之我见 - 简约版
Vanlin的BLOG
06-27 1400
RT，拖动可能是时下比较流行的一个js效果之一,在感叹创造者的神奇之外，我怀作好奇，也来尝试了一把(当然，是在欣赏了不少拖动代码的基础上，并妄想通过最简单的办法实现)。其实，拖动特效可以由3个主要部分组成，开始拖动，拖动，结束拖动。哎，不说这么多了（摄影的朋友肯定要说， 怎么还不上图了...呵呵）,好，我就来点代码吧。开始拖动之前，先上2个简单的工具方法： 1 var  Utils 
javascript 拖拽功能
青天诀的专栏
12-04 1016
拖拽功能是我们经常用到的一个功能，流程如下： 鼠标点击选框时，计算出鼠标位置和选框位置的距离差，也就是disX和disY；鼠标移动，获取鼠标位置坐标，然后减去步骤一种的距离差，就是选框的坐标；鼠标弹起时，清除鼠标移动函数 需要注意以下几点： 鼠标移动时，有可能移出选框的范围，所以需要使用全局的移动函数，也就是document.onmousemove；鼠标弹起时，可能不在选
拖拽图片
天空守护云
02-18 221
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/css"&gt; img{width:
图片拖拽
m0_48791508的博客
05-12 209
图片效果如下： // 设置draggable属性为false --然后给photos这个盒子设置相对定位属性 // <img src="eye.png" alt="eye" draggable="false"> 添加决对定位属性 <h1>请拖拽图片到相应位置上</h1> <div class="photos"> <img src="pudding.jpg" alt="pudding" draggable="false"> <img s
拖拽图片js
qq_41834729的博客
09-15 256
拖拽图片js vue图片McBigPicture.vue <template> <div class="demo-image__placeholder" > <div class="block draggable-box" :style="{width:bigpicturewidth+'px',height:bigpictureheight+'px'}"> <el-image :style="{width:bigpicturewidth+'
Javascript实现对象的拖动操作
陈杰的专栏
06-23 1599
学着写的一段鼠标拖动的代码，感觉挺有意思。本例需要掌握的技巧比较多，捕捉鼠标，获取鼠标位置(相当于对象)，释放鼠标捕捉，文档的滚动距离。1.       setCapture() 设置属于当前文档的对象的鼠标捕捉。 2.       event.offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 3.       event.offsetY 设置或获取鼠标指针位置相对于触发事
JavaScript拖拽
wh_200的博客
10-07 215
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> <meta http-e.
鼠标拖拽
qq_45627570的博客
09-24 224
<title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; position: absolute; } #box2{ width: 100px; height: ...
实现纯粹JavaScript图片拖动效果的简易方法
图片拖动效果是JavaScript在Web开发中常见的应用之一，它利用了JavaScript提供的事件处理机制和DOM操作功能。开发者通过编写JavaScript代码，可以控制网页上的图片元素，并根据用户的操作（如鼠标拖拽）改变图片的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值