加个判断先
oo.style.width = (oo.width + e.clientX - oo.cx)>0?(oo.width + e.clientX - oo.cx):0;
oo.style.height = (oo.height + e.clientY - oo.cy)>0?(oo.height + e.clientY - oo.cy):0;
oo.style.width = (oo.width + e.clientX - oo.cx)>0?(oo.width + e.clientX - oo.cx):0;
oo.style.height = (oo.height + e.clientY - oo.cy)>0?(oo.height + e.clientY - oo.cy):0;
改过来就好了
但是在ff下,拉着div ,鼠标移动到浏览器外,会导致onmouseup丢失,这个怎么解决了
我太菜了 对拖拽的细节上基本上知道怎么解决
把错误改过来后就不会有问题了。
至少在我的机器上没有出现丢失事件的现象。
不过我用的是IE6和FF3,
是不是别的版本上有问题就不得而知了。
如果你那里还出现问题的话,请尝试用setCapture和releaseCapture,
FF下对象的函数是captureEvent和releaseEvent.<script>
function zoom(id){
var obj= this
this.element = document.getElementById(id)
document.getElementById(id).onmousedown =function(e)
{
e = e || event
var oo = obj.element
oo.width = oo.offsetWidth
oo.height = oo.offsetHeight
oo.cx = e.clientX
oo.cy = e.clientY
document.onmousemove=function(e)
{
e = e || event
var oo = obj.element
if( oo.width + e.clientX - oo.cx > 0 ) {
oo.style.width = oo.width + e.clientX - oo.cx
}else {
oo.style.width = 0;
}
if( oo.height + e.clientY - oo.cy > 0 ) {
oo.style.height = oo.height + e.clientY - oo.cy
}
}
document.onmouseup=function()
{
document.onmousedown = null
document.onmousemove = null
}
}
}
window.onload = function(){
new zoom("gg")
}
</script>
<body>
<div id="gg" style="width:200px; height:200px; background:#99FF00; cursor:nw-resize;">
</div>
</div>
</body>