褰撶湅鍒拌繖浜涙晥鏋滅殑鏃跺欙紝搴旇緇撳悎鑷繁鎵鐭ラ亾鐨勭煡璇嗗幓鎯蟲槸鎬庝箞鏍峰疄鐜扮殑錛屽綋鐒惰繖閲屽疄鐜扮殑鏂規(guī)硶涓嶆槸鍞竴鐨勩傛瘡涓漢閮芥湁鑷繁鐨勬濊礬錛屽綋鎯沖埌鐨勬椂鍊欏氨鑷繁涓誨姩鐨勭紪鐮佽瘯涓涓嬨?/p>
榪欎釜緋誨垪鏂囩珷絎竴閮ㄥ垎錛岄鍏堜粠鏈綆鍗曠殑鎷栧姩寮濮嬭璧鳳紝鏈変笉鎳傜殑鏈嬪弸鍙互鐣欒█銆?/p>
綆鍗曠殑鎷栧姩DIV鐨勪富瑕佺紪紼嬫濊礬錛?/p>
1銆佸簲璇ヤ簡(jiǎn)瑙f嫋鍔紝棣栧厛鍗蟲槸鍧愭爣銆備篃灝辨槸璇達(dá)紝瑕佷簡(jiǎn)瑙HTML閲岄潰鐨勫潗鏍囩殑灞炴с傝繖閲屾垜浠敤鐨勬槸event.clientX鍜宔vent.clientY錛屽嵆榧犳爣鐩稿浜庤竟璺漍鐨勮窛紱誨拰Y鐨勮窛紱匯傚鏋滄湁涓嶆槑鐧界殑錛屽彲浠ュ幓鏌ラ槄鐩稿叧璧勬枡錛岃繖閲屼笉鍐嶈禈榪般?/p>
2銆佸浣曞緱鍒版嫋鍔ㄥ鐨勭殑鍧愭爣鍛紵鍙互鐢╫ffsetTop鍜宱ffsetLeft鏉ュ緱鍒幫紝灞炴ф垜涔熶笉鍐嶅璇達(dá)紝璇鋒煡闃匘HTML鍙傝冦?/p>
3銆佸簲璇ユ湁澶ц嚧鐨勬濊礬浜?jiǎn)鍚уQ岀敤浠涔堜簨浠舵潵瑙﹀彂鎷栧姩鐨勫彞鏌勫憿錛熷綋鐒跺彲浠ョ敤ondrag鐨勪簨浠訛紝浣嗘槸涓嶅お鍙彇銆備篃涓嶅お鍒╀簬浠ュ悗涓哄吋瀹硅屽仛鐨勫噯澶囧伐浣溿傞偅榪樻湁浠涔堜簨浠跺彲浠ョ敤錛熶粩緇嗘兂鎯籌紝鎷栧姩鏃朵細(xì)瑙﹀彂浠涔堜簨浠訛紝涓銆佸綋榧犳爣縐諱笂瀵硅薄鏃躲備簩銆侀紶鏍囨寜涓嬨備笁榧犳爣縐誨姩銆傚洓銆侀紶鏍囨斁寮銆傝繖鍑犱釜涔熷氨鏄偅鍑犱釜浜嬩歡銆傚嵆瀵瑰簲鐨刼nmouseover銆乷mousedown銆乷nmousemove銆乷nmouseup浜嬩歡銆?/p>
4銆佸浣曡綆楀潗鏍囷紵鎴戠殑鎬濊礬鏄繖鏍風(fēng)殑錛氫竴錛岄紶鏍囨寜涓嬫椂錛岃寰楁嫋鍔ㄧ墿浠剁殑鐩稿鍧愭爣銆備簩銆佹嫋鍔ㄦ椂鎹曡幏瀵硅薄錛屽茍瀹炴椂寰楀埌鍧愭爣錛岀敤褰撳墠鐨勫潗鏍囧噺鍘誨師濮嬪潗鏍囷紝寰楀埌鏂扮殑鍧愭爣錛屽茍鎶婃嫋鍔ㄧ墿浠剁殑left鍜宼op璁劇疆涓哄綋鍓嶇殑X鍜孻鍧愭爣銆備笁銆侀紶鏍囨斁寮鏃訛紝閲婃斁鎵鏈夌殑瀵硅薄銆?/p>
5銆佸紑濮嬬紪鐮併?/p>
鎴戜滑鎸夌収涓婇潰鐨勬濊礬鏉ヤ竴姝ユ鐨勫啓浠g爜
涓銆佸叧浜庡潗鏍噀vent.clientX鍜宔vent.clientY錛岃屼負(fù)浠涔堜笉鐢╡vent.x鍜宔vent.y錛屼互鍚庢垜浼?xì)鍐欐竻妤氬Q屽叾瀹炲凡緇忓啓濂戒簡(jiǎn)鐨勩傜湅鎯呭喌鎴戝氨浼?xì)鑴?chuàng)鍑烘潵銆傝漿鍏ユ棰樺惂錛岀湅鐪嬪弬鑰?
clientX 璁劇疆鎴栬幏鍙栭紶鏍囨寚閽堜綅緗浉瀵逛簬紿楀彛瀹㈡埛鍖哄煙鐨?x 鍧愭爣錛屽叾涓鎴峰尯鍩熶笉鍖呮嫭紿楀彛鑷韓鐨勬帶浠跺拰婊氬姩鏉°?
clientY 璁劇疆鎴栬幏鍙栭紶鏍囨寚閽堜綅緗浉瀵逛簬紿楀彛瀹㈡埛鍖哄煙鐨?y 鍧愭爣錛屽叾涓鎴峰尯鍩熶笉鍖呮嫭紿楀彛鑷韓鐨勬帶浠跺拰婊氬姩鏉°?
浜屻佸緱鍒版嫋鍔ㄧ墿浠剁殑鍧愭爣銆傚嵆寰楀埌緇濆鍧愭爣錛岀敤浠ヤ笅浠g爜銆傚弬鏁癳涓烘嫋鍔ㄧ墿浠跺璞★紝浣跨敤鍑芥暟鏃朵紶鍏ャ傝繑鍥炵殑鏄璞$殑X鍧愭爣銆乊鍧愭爣銆佸搴︺侀暱搴︾殑鏁扮粍鍏寵仈銆傝屼負(fù)浠涔堣繕瑕佺敤榪唬姹俹ffsetLeft鍜宱ffsetTop鍛紵鍥犱負(fù)浠栦滑鏄浉瀵逛簬鐖跺潗鏍囪岃█鐨勶紝鎵浠ュ繀欏婚氳繃寰幆鏉ュ緱鍒扮粷瀵瑰畾浣嶃?br> function Offset(e) {
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight;
while(e=e.offsetParent) {
t+=e.offsetTop;
l+=e.offsetLeft;
}
return { t:t, l:l, w:w, h:h }
};
涓夈佺敤浜嬩歡瑙﹀彂紼嬪簭鍙ユ焺銆?br>obj.onmouseover=function() {
//to do; never-online Demo
};
obj.onmousedown=function() {
//to do; never-online Demo
}
obj.onmousemove=function() {
//to do; never-online Demo
}
obj.onmouseup=function() {
//to do; never-online Demo
}
鍥涖佹嫋鍔ㄦ椂寰楀埌鍧愭爣銆?br>obj.onmousedown=function() {
//褰撴寜涓嬫椂璁頒綇鍘熷鍧愭爣銆俷ever-online Demo
obj.X = event.clientX - Offset(obj).l;
obj.Y = event.clientY - Offset(obj).t;
}
obj.onmousemove=function() {
鏂板潗鏍囧噺鍘繪棫鍧愭爣寰楀埌褰撳墠浣嶇疆 never-online Demo
obj.style.left = event.clientX - obj.X;
obj.style.top = event.clientY - obj.Y;
}
浜斻佺湅鐪嬪畬鏁寸殑綆鍗曟嫋鍔ㄥ眰浠g爜鍚с?br>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> how to make a drag division - http://www.never-online.net </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="never-online, blueDestiny">
<META NAME="Keywords" CONTENT="never-online, blueDestiny">
<META NAME="Description" CONTENT="http://www.never-online.net">
<style>
<!--
body {
font-size:0.9em;
font-family:verdana;
background-color:appworkspace;
}
.myDiv {
border:4px solid #006699;
height:200px;
width:400px;
color:#003399;
padding:20px;
font-weight:bolder;
text-align:center;
background-color:#eeeeee;
}
.copyright
{
text-align: center;
font-size: 1em;
}
-->
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
function neverDragDivision(fObj) { with (this)
{
if (!fObj) return;
this.bDraged = false;
this.oDragOrig = fObj;
oDragOrig.style.cursor = "move";
oDragOrig.onmousedown = function()
{
var ofs = Offset(oDragOrig);
oDragOrig.style.position = "absolute";
oDragOrig.style.left = ofs.l;
oDragOrig.style.top = ofs.t;
oDragOrig.X = event.clientX - ofs.l;
oDragOrig.Y = event.clientY - ofs.t;
bDraged = true;
};
oDragOrig.onmousemove = function()
{
if (!bDraged) return;
oDragOrig.setCapture();
oDragOrig.style.left = event.clientX - oDragOrig.X;
oDragOrig.style.top = event.clientY - oDragOrig.Y;
};
oDragOrig.onmouseup = function()
{
bDraged = false;
oDragOrig.releaseCapture();
};
function Offset(e) {
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight;
while(e=e.offsetParent) {
t+=e.offsetTop;
l+=e.offsetLeft;
}
return { t:t, l:l, w:w, h:h }
};
}};
//-->
</SCRIPT>
</HEAD>
<BODY>
<table>
<tr>
<td>
<div class="myDiv">
http://www.never-online.net
<p>power by blueDestiny, never-online</p>
</div>
</td>
<td>
<div class="myDiv" style="width:450px">
<p>never-online, Everlasting love for angela.</p>
</div>
</td>
</tr>
</table>
<h4 class="copyright"> Power By blueDestiny, never-online, <a href="http://www.never-online.net" _fcksavedurl="http://www.never-online.net">http://www.never-online.net</a> </h4>
<SCRIPT LANGUAGE="JavaScript">
<!--
var aDivs = document.getElementsByTagName("DIV");
for (var i=0; i<aDivs.length; i++) {
new neverDragDivision(aDivs[i]);
}
//-->
</SCRIPT>
</BODY>
</HTML>