JavaScript拖拽图片一

最新推荐文章于 2023-11-28 11:58:47 发布
最新推荐文章于 2023-11-28 11:58:47 发布
阅读量528 收藏
点赞数
分类专栏： 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值)。

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


hashsound_Wang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
draggable-vue-directive：处理拖放的Vue2指令
02-04
可拖动的vue指令 Vue指令（Vue.js 2.x）用于处理元素拖放。 安装 npm install draggable-vue-directive --save 演示版 您可以在此处查看现场演示： : 例子 没有处理程序 < div> classic draggable </ div> .vue文件： import { Draggable } from 'draggable-vue-directive' ... export default { directives : { Draggable
JavaScript 练手小技巧：拖拽事件、把图片拖拽入页面
九天翔龙的技术博客
01-30 2985
HTML5 新增了拖拽事件 drag，利用它可以实现把外部文件拖拽入页面中，可以实现文件的读取，上传等等功能。
JavaScript拖拽API，ondragstart、ondragover、ondragenter、ondrop，使用详细（JavaScript常用原生拖拽API）
weixin_65793170的博客
05-30 3946
JavaScript的拖拽api相必大家都不陌生，今天来分享下元素在拖动时触发的事件，顺便做下记录。
如何使用js实现拖拽效果？
最新发布
黄彪博客
11-28 1938
因为设置了拖拽属性的元素就可以被拖拽，结束拖拽的时候获取一下鼠标与页面的距离，减去鼠标与元素中的距离就行了，逻辑为旧有拖拽方式的第二种：盒子的位置 = 元素与页面间的距离 - 元素与盒子的距离。：返回元素与有定位的父类的上左边距，如果父类都没有定位，那么返回相对于页面的上左边距（本示例中页面内只有一个元素，故获取的值是元素相对于页面的距离）：鼠标距离触发事件的元素的上左边距（本示例中只有一个元素，故获取的值为鼠标相对于盒子元素的上左边距）// 元素的位置 = 鼠标与页面的距离 - 鼠标与元素的距离。
js实现图片拖拽
weixin_46508703的博客
09-23 3469
<style> div{ position: relative; width: 150px; height: 150px; background-image: url(./images/img.jpg); background-size: 100%; } </style> <body> <div id="pop" ></div> <script> var pop = document.getElemen
javascript拖拽图片到指定位置
08-14
javascript拖拽图片到指定位置 。。。。。。。。。。。。。。。。。。。
JavaScript 实现图片拖拽
11-25
JavaScript 实现图片拖拽
JavaScript实现图片的放大缩小及拖拽功能示例
10-17
主要介绍了JavaScript实现图片的放大缩小及拖拽功能,结合实例形式分析了javascript鼠标事件响应及针对图形元素的属性操作相关实现技巧,需要的朋友可以参考下
JavaScript实现文字与图片拖拽效果的方法
10-24
主要介绍了JavaScript实现文字与图片拖拽效果的方法,涉及javascript操作文字与图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
javascript 网页编辑框及拖拽图片的问题
10-29
javascript 网页编辑框及拖拽图片的问题,需要的朋友可以参考下。
vue给元素添加指令_Vue指令，用于处理元素拖放
cuk5239的博客
07-23 796
vue给元素添加指令 可拖动的vue指令 (draggable-vue-directive) Vue2 directive that handles drag & drop. 处理拖放的Vue2指令。 入门 (Getting Started) npm install draggable-vue-directive --save 典型用途： (Typical use:) <di...
Js高级技巧—拖放
10-15 398
为 DragDrop 对象的每个事件添加了事件处理程序。还使用了一个元素来实现被拖动的元素当前的状态和位置。一旦元素被放下了，就可以看到从它一开始被拖动之后经过的所有的中间步骤。 为 DragDrop 添加自定义事件可以使这个对象更健壮，它将可以在网络应用中处理复杂的拖放功能。
Vue 拖拽功能 之 自定义指令实现元素拖拽功能
前端看世界
07-27 5786
拖拽功能主要操作的是真实的DOM元素以及鼠标事件，在vue中使用自定义指令最合适不过了。 当然使用组件封装起来，然后拖拽这个组件，也是可以实现相同的效果，不过我觉得这样有点大材小用，也缺乏灵活性，好处是可以传入更多的控制属性。总之，在组件与指令之间找到平衡点，自有取舍。...
javascript学习之拖拉事件
白话机器学习
08-05 962
所有拖拉事件的实例都有一个属性，用来读写需要传递的数据。这个属性的值是一个接口的实例。浏览器原生提供一个构造函数，用来生成实例对象。构造函数不接受参数。拖拉的数据分成两方面：数据的种类（又称格式）和数据的值。数据的种类是一个 MIME 字符串（比如text/plainimage/jpeg），数据的值是一个字符串。一般来说，如果拖拉一段文本，则数据默认就是那段文本；如果拖拉一个链接，则数据默认就是链接的 URL。拖拉事件开始时，开发者可以提供数据类型和数据值。拖拉过程中，开发者通过。
js实现拖拽功能
study_way的博客
10-17 1236
在这个示例中，创建了两个元素：一个可拖拽的元素（draggable）和一个接受拖动的目标元素（droppable）。ondragover 阻止默认行为，以允许元素可以放置在该区域，而 ondrop 处理实际的拖放操作，将拖拽的元素追加到目标元素中。通常，要实现拖拽效果，需要将元素设置为绝对定位，这样它可以脱离文档流，使其能够在页面上自由移动。事件处理程序中更新元素的位置时，限制元素的移动范围，以防止它移出可见区域或父元素的边界。事件处理程序中，计算鼠标位置的变化，并根据变化来更新被拖拽元素的位置。
js实现拖拽图片
混世小妲己
05-08 3389
js图片拖拽
vue自定义指令-拖拽指令
weixin_44524836的博客
04-03 433
1.在src下创建directive文件夹 index.js import directives from './directives' const importDirective = Vue => { Object.keys(directives).forEach(key => { Vue.directive(key, directives[key]) }) } ...
js原生实现拖放效果（附源码）
weixin_51437539的博客
03-30 506
实现拖放效果有两种，一种是利用drag事件实现，一种是利用鼠标事件实现，我这里采用鼠标事件实现。主要用到的事件：mousemove(鼠标移动),mouseup（鼠标按下）,mousedown（鼠标抬起）当点击dom的时候，记录当前鼠标的坐标值，也就是x、y值，以及被拖拽的dom的top、left值，在鼠标按下的回调函数里添加鼠标移动的事件；并且添加鼠标抬起事件，为了解除鼠标移动的监听，因为只有在鼠标按下才可以拖拽，抬起就停止不会移动了。：表示listener在添加之后最多只调用一次。如果为true。
原生JS快速实现拖放（drag and drop）效果
web前端开发教程htmlcssjs
12-06 905
拖放是很常见的一种交互效果，很多时候我们都会借助于第三方的控件来实现，其实用原生js实现起来也非常的方便。接下来我们就用原生js和css快速实现这样的拖放效果： HTML HTML的内容很简单，就是五个空的容器和一个可以被拖拽的元素： html： <body> <div class="droppable"> <div class="draggable" ...
html鼠标拖动图片放大,JavaScript实现图片的放大缩小及拖拽功能示例
06-10
好的，这个问题我可以回答。以下是一个简单的HTML和JavaScript实现图片放大缩小和拖拽的示例： ```html <!DOCTYPE html> <html> <head> <title>Image Zoom and Drag</title> <style> #image-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid black; overflow: hidden; cursor: move; } #image-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> </head> <body> <div id="image-container"> <img src="https://picsum.photos/id/237/300/300" id="image"> </div> <script> var image = document.getElementById("image"); var imageContainer = document.getElementById("image-container"); var isDragging = false; var lastX, lastY; imageContainer.addEventListener("mousedown", function(e) { isDragging = true; lastX = e.clientX; lastY = e.clientY; }); imageContainer.addEventListener("mouseup", function(e) { isDragging = false; }); imageContainer.addEventListener("mousemove", function(e) { if (isDragging) { var deltaX = e.clientX - lastX; var deltaY = e.clientY - lastY; var newTop = image.offsetTop + deltaY; var newLeft = image.offsetLeft + deltaX; image.style.top = newTop + "px"; image.style.left = newLeft + "px"; lastX = e.clientX; lastY = e.clientY; } }); imageContainer.addEventListener("wheel", function(e) { e.preventDefault(); var scale = e.deltaY > 0 ? 0.9 : 1.1; var newWidth = image.clientWidth * scale; var newHeight = image.clientHeight * scale; image.style.width = newWidth + "px"; image.style.height = newHeight + "px"; }); </script> </body> </html> ``` 这个示例中，我们首先创建了一个容器 `image-container`，然后在容器中放置了一个图片 `image`。我们使用 CSS 来将容器居中并添加了一些样式，例如设置容器为相对定位、边框、隐藏溢出部分和鼠标指针为移动。 然后我们使用 JavaScript 来添加拖拽和缩放的功能。我们使用了三个变量 `isDragging`、`lastX` 和 `lastY` 来跟踪拖拽状态和鼠标位置。当用户按下鼠标按钮时，我们设置 `isDragging` 为 `true` 并记录下当前鼠标位置。当用户释放鼠标按钮时，我们设置 `isDragging` 为 `false`。当用户移动鼠标时，我们检查 `isDragging` 是否为 `true`，如果是，就计算鼠标移动的距离，并将图片的位置相应地调整。这样就实现了拖拽的功能。 最后，我们添加了一个滚轮事件监听器来实现缩放功能。当用户滚动鼠标滚轮时，我们阻止默认行为，然后根据滚轮的方向计算缩放比例，并将图片的宽度和高度相应地调整。 希望这个示例能够帮助你实现所需的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值