本身作的实现图片等元素的拖拽

时间 2019-12-04
标签本身实现图片元素繁體版
原文原文链接
采用的是jquery1.2javascript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<mce:script src="js/jquery.js" mce_src="js/jquery.js" type="text/javascript"></mce:script>
<mce:script type="text/javascript"><!--
$(function(){
	//拖拽对象
	var bar = $("#faDiv");
	if (!bar.size() || !bar.size()) {
		$(document).unbind("mouseover").unbind("mouseup");
		return;
	}
	var drag = false;
	var currentX = 0, currentY = 0, posX = bar.offset().left, posY = bar.offset().top;
	bar.bind("mousedown",dragMouseDownHandler =function(e) {
		drag = true;
		currentX = e.pageX;
		currentY = e.pageY;	
		//注：mousemove与mouseup下件均针对document注册，以解决鼠标离开_controlObj时事件丢失问题
		//注册事件(鼠标移动)			
		$(document).bind("mousemove", dragMouseMoveHandler);
		//注册事件(鼠标松开)
		$(document).bind("mouseup", dragMouseUpHandler);
	}).css("cursor", "move");	
	
	$(document).bind("mousemove",dragMouseMoveHandler=function(e) {
		if (drag) {
			var nowX = e.pageX, nowY = e.pageY;
			var disX = nowX - currentX, disY = nowY - currentY;
			bar.css("left", posX + disX).css("top", posY + disY);
			//取消事件的默认动做
			if(evt.preventDefault)
				evt.preventDefault();
			else
				evt.returnValue = false;
		}					   
	});
	
	$(document).bind("mouseup",dragMouseUpHandler=function() {
		drag = false;
		posX = bar.offset().left;
		posY = bar.offset().top;
		cleanMouseHandlers();
		
	});
	
	//注销鼠标事件(mousemove mouseup)
	var cleanMouseHandlers = function(){
		if(_dragObj){
			$(_dragObj.document).unbind("mousemove");
			$(_dragObj.document).unbind("mouseup");
		}
	};
})
// --></mce:script>
</head>

<body>

<div id="faDiv" style="position:absolute;" mce_style="position:absolute;">
<img id="wrapDiv" width="100px" height="100px" src="http://img.baidu.com/img/iknow/mobile/wapiknow.jpg" mce_src="http://img.baidu.com/img/iknow/mobile/wapiknow.jpg" />
</div>


<input type="button" value="test" onclick="test()"/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<input id="xtxt" />
<input id="ytxt" />
</body>
</html>