JavaScript拖拽图片一

最新推荐文章于 2023-08-30 13:57:07 发布

左手程序右手拳

最新推荐文章于 2023-08-30 13:57:07 发布

阅读量8k

点赞数 1

分类专栏： Web前端

本文链接：https://blog.csdn.net/csfreebird/article/details/7726938

版权

Web前端专栏收录该内容

34 篇文章 0 订阅

订阅专栏

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

先看html代码：

<html>
  <head>
    <title>drag demo</title>
    <script src="js/drag.js" type="text/javascript"></script>
  </head>
  <body οnlοad="init()">
    <div id="icon1" 
	 οnmοusedοwn="mouseDown(event)"
	 style="left:1px; top: 1px; position: absolute;">
      <img alt="" border="0" src="/img/2.jpg"></img>
    </div>
  </body>
</html>

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

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

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

然后看看drag.js文件：

function init() {
	window.document.onmousemove = mouseMove;
	window.document.onmouseup = mouseUp;
	window.document.ondragstart = mouseStop;
}

function mouseDown(e) {
	window.dragObj = e.currentTarget;
	if (window.dragObj !== null) {
		window.clickLeft = window.event.x - parseInt(dragObj.style.left);
		window.clickTop = window.event.y - parseInt(dragObj.style.top);
		window.dragObj.style.zIndex += 1;
	}
}

function mouseStop() {
	window.event.returnValue = false;
}

function mouseMove() {
	if (window.dragObj !== null ) {
		window.dragObj.style.left = window.event.x - window.clickLeft;
		window.dragObj.style.top = window.event.y - window.clickTop;
	}
}

function mouseUp() {
	window.dragObj = null;
}

ondragStart事件被禁用。

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

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

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

左手程序右手拳

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaScript拖拽图片一

本文演示如何将一张图片用鼠标拖拽到某个位置。先看html代码： drag demo <div id="icon1" onmousedown="mouseDown(event)" style="left:1px; top: 1px; position: absolute;"> 注意，必须在style中指定三个属性:
复制链接

扫一扫