首頁 > 開發者 > JavaScript
學一點寫一點。實現的方法有很多，這算其一吧。 <html><br /><head><br /><title></title><br /><mce:script language="javascript" type="text/javascript"><!--<br />function showpos()<br />{<br /> document.all.x.value = event.clientX;<br /> document.all.y.value = event.clientY;<br />}<br />function Point()<br />{<br /> this.x, this.y;<br /> this.eventpos = function()<br /> {<br /> this.x = event.clientX;<br /> this.y = event.clientY;<br /> }<br /> this.setpos = function(pt)<br /> {<br /> this.x = pt.x;<br /> this.y = pt.y;<br /> }</p><p>}<br />var ptPre = new Point();<br />var ptCur = new Point();</p><p>function move(ptTo, ptFrom)<br />{<br /> ox = ptTo.x - ptFrom.x;<br /> oy = ptTo.y - ptFrom.y;<br /> event.srcElement.style.posLeft += ox;<br /> event.srcElement.style.posTop += oy;<br />}<br />// --></mce:script></p><p><mce:style type="text/css"><!--<br />.dr<br />{<br />position : relative ;<br />cursor : hand ;<br />event:expression(<br />ondragstart=function()<br />{<br />ptCur.eventpos();<br />ptPre.eventpos();<br />},<br />ondrag=function(){<br /> ptCur.eventpos();<br /> move(ptCur,ptPre);<br /> ptPre.setpos(ptCur);<br />}<br />)<br />}<br />--></mce:style><style type="text/css" mce_bogus="1">.dr<br />{<br />position : relative ;<br />cursor : hand ;<br />event:expression(<br />ondragstart=function()<br />{<br />ptCur.eventpos();<br />ptPre.eventpos();<br />},<br />ondrag=function(){<br /> ptCur.eventpos();<br /> move(ptCur,ptPre);<br /> ptPre.setpos(ptCur);<br />}<br />)<br />}</style><br /></head><br /><body onmousemove="showpos()" ><br /><form><br /><div class="dr">X:<input name="x" id="x" type="text"></input></div><br /><div class="dr">Y:<input name="y" id="y" type="text"></input></div><br /></form><br /><img class="dr" src="free_register.gif" mce_src="free_register.gif" /><br /><br/><br /><div class="dr">Select me,and drag</div><br /></body><br /></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
