Ajax Drag and Drop

<style type="text/css">
	#television{
		position:absolute;
		z-index:200;
		background:#FF0000;
		color:#0000FF;
	}
	#target{
		position:absolute;
		background:#00FF00;
		color:#000000;
	}
</style>
<html>
<head><title>Ajax Drag and Drop</title>
<Meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript">	
	function MouseEvent(e){
		if(e)
			this.e = e;
		else 
			this.e = window.event;
		if(e.pageX)
			this.x = e.pageX;
		else 
			this.x = e.clientX;
		if(e.pageY)
			this.y = e.pageY;
		else	
			this.y = e.clientY;
		if(e.target)
			this.target = e.target;
		else	
			this.target = e.srcElement;
	}
	function addListener(type,callback){
		if(document.addEventListener)
			document.addEventListener(type,callback,false);
		else if(document.attachEvent)
			document.attachEvent("on" + type,false);
	}
	
	function removeListener(type,callback){
		if(document.addEventListener)
			document.removeEventListener(type,false);
		else if(document.attachEvent)
			document.detachEvent("on" + type,false);
	}

</script>
<script type="text/javascript">
	function handleMove(e){
		var e = new MouseEvent(e);
		var x = e.x - offsetx;
		e.target.style.left = x + "px";
		var y = e.y - offsety;
		e.target.style.top = y + "px";
	}
	
	function handleUp(e){
		var e = new MouseEvent(e);
		removeListener("mousemove",handleMove);
		removeListener("mouseup",handleUp);
		var target = document.getElementById("target");
		
		var x = parseInt(target.style.left);
		var y = parseInt(target.style.top);
		var width = parseInt(target.style.width);
		var height = parseInt(target.style.height);
		
		if(e.x > x && e.x < (x+width) && e.y > y && e.y < (y+height)){
			//document.getElementById("targetDiv").innerHTML="television has put in shopping cart!";
			var XMLHttpRequestObj = false;
			if(window.XMLHttpRequest)
				XMLHttpRequestObj = new XMLHttpRequest();
			else if(window.ActiveXObject)
				XMLHttpRequestObj = new ActiveXObject("Microsoft.XMLHTTP");
			if(XMLHttpRequestObj){
				XMLHttpRequestObj.open("GET","text.txt");
				XMLHttpRequestObj.onreadystatechange = function(){
					if(XMLHttpRequestObj.readyState == 4 && XMLHttpRequestObj.status == 200){
						document.getElementById("targetDiv").innerHTML = XMLHttpRequestObj.responseText;
						delete XMLHttpRequestObj;
						XMLHttpRequestObj = null;
					}
				}
				XMLHttpRequestObj.send(null);
			}
			
		}
	}
</script>
<script type="text/javascript">
	
	var offsetx,offsety;
	function handleDown(e){
		var e = new MouseEvent(e);
		addListener("mousemove",handleMove);
		addListener("mouseup",handleUp);
		offsetx = e.x - parseInt(television.style.left);
		offsety = e.y - parseInt(television.style.top);
		document.getElementById("targetDiv").innerHTML="";
	}
</script>
</head>
	<body>
		<h1>buy a television by dragging it to the shoping cart</h1>
		<div id="targetDiv"></div>
		<div id ="television" style="left:200px;top:100px;widh:80px;height:80px;"
		
		onmousedown="handleDown(event);">Television</div>
		<div id = "target" style="left:300px;top:300px;width:200px;height:200px;">shopping</div>
		
	</body>
</html>
原文链接：https://www.f2er.com/ajax/164490.html
猜你在找的Ajax相关文章
