开发学院网页设计 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>