JavaScript拖拽图片1-JavaSript-爱易网页

JavaScript拖拽图片1

日期：2014-05-16　浏览次数：20384 次

JavaScript拖拽图片一

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

先看html代码：

<html>
  <head>
    <title>drag demo</title>
    <script src="js/drag.js" type="text/javascript"></script>
  </head>
  <body onload="init()">
    <div id="icon1" 
	 onmousedown="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值)。

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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

JavaScript拖拽图片1

相关资料更多>

推荐阅读更多>