本身作的實現圖片等元素的拖拽

時間 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。