Ajax Drag and Drop
发布时间:2020-12-16 00:24:35 所属栏目:百科 来源:网络整理
导读:style type="text/css"#television{position:absolute;z-index:200;background:#FF0000;color:#0000FF;}#target{position:absolute;background:#00FF00;color:#000000;}/stylehtmlheadtitleAjax Drag and Drop/titlemeta http-equiv="Content-Type" content=
<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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |