开发学院网页设计 JavaScript JavaScript 拖放效果 —— 小拖放也有大智慧阅读

JavaScript 拖放效果 —— 小拖放也有大智慧

　2010-09-14 13:25:12　来源：WEB开发网　闂傚倷绶氬ḿ褍螞閹绢喖绠柨鐕傛嫹

闂傚倷绀侀幉锟犲垂閻㈠灚宕查柟鎵閸庡秵銇勯幒鎴濃偓鐢稿磻閹炬枼妲堟繛鍡楃С濞岊亞绱撻崒姘扁枌闁瑰嚖鎷�

婵犵數濮幏鍐川椤撴繄鎹曢梻渚€娼уú銈吤洪妸鈺佺劦妞ゆ帊鑳堕埊鏇㈡煏閸モ晛浠х紒杈╁仱閺佹捇鏁撻敓锟�闂傚倷绶氬ḿ褍螞閹绢喖绠柨鐕傛嫹　　闂傚倷鑳舵灙缂佺粯顨呴埢宥夊即閵忕姵鐎梺缁樺姈椤愮厧鈽夊Ο閿嬬€婚梺褰掑亰閸撴稑鈻斿鑸碘拺闁告稑饪村▓鏃€绻涚仦鍌氬闁崇粯鎹囬獮瀣攽閹邦剚顔傛俊鐐€栧濠氬储瑜忛幉鎾晸閿燂拷

核心提示： ie:document.selection.empty()ff:window.getSelection().removeAllRanges()为了防止在拖放过程中选择内容，所以把它放到Move程序中，JavaScript 拖放效果 —— 小拖放也有大智慧(9)，下面是兼容的写法：windo

ie:document.selection.empty() ff:window.getSelection().removeAllRanges()

为了防止在拖放过程中选择内容，所以把它放到Move程序中，下面是兼容的写法：

window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();

【margin】

还有一个情况，当拖放对象设置了margin，那么拖放的时候就会错位（给SimpleDrag的拖放对象设置margin就可以测试）。

原因是在Start程序设置_x和_y时是使用offset获取的，而这个值是包括margin的，所以在设置left和top之前要减去这个margin。

但如果在Start程序中就去掉margin那么在Move程序中设置范围限制时就会计算错误，

所以最好是在Start程序中获取值：

this._marginLeft=parseInt(CurrentStyle(this.Drag).marginLeft)||0; this._marginTop=parseInt(CurrentStyle(this.Drag).marginTop)||0;

其中CurrentStyle是用来获取最终样式，详细看这里的最终样式部分。

在Move程序中设置值：

this.Drag.style.left=iLeft-this._marginLeft+"px"; this.Drag.style.top=iTop-this._marginTop+"px";

要注意margin要在范围修正只后再设置，否则会错位。

【透明背景bug】

在ie有一个透明背景bug（不知算不算bug），可以用下面的代码测试：

Code

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <body> <divonmousedown="alert(1)"style="border:10pxsolid#C4E3FD;width:50px;height:50px;position:absolute;"></div> </body> </html>