祝：大家元旦快乐，顺便问个问题。。。

muxrwc 2006-12-31 05:21:01

<html>
<head>
<style type="text/css">
#wc, #wc1 {
z-index:1;
position:absolute;
height:150px;
width:200px;
background-color:#F4FAFF;
border:#CCCCCC 1px dashed;
cursor:move;
}
#wc1 {
top:100px;
left:100px;
}
</style>
<script type="text/javascript">
/*我想问下怎么判断鼠标越出浏览器，因为在FF鼠标越出浏览器时，就捕获不到了。
代码如下 - -#貌似有点多。。*/
function Drag() {
var event, obj, ox, oy;
var allLeft, allTop;
var scrollTop, scrollLeft, scrollRight, scrollBottom;
function startDrag(e) {
//当按下时初始化参数
event = window.event || e;
obj = event.srcElement || event.target
allLeft = document.body.scrollLeft;
allTop = document.body.scrollTop;
ox = allLeft + event.clientX - obj.offsetLeft;
oy = allTop + event.clientY - obj.offsetTop;
scrollLeft = allLeft + ox + 1;
scrollTop = allTop + oy + 1;
scrollRight = allLeft + document.body.clientWidth - obj.clientWidth + ox - 3;
scrollBottom = allTop + document.body.clientHeight - obj.clientHeight + oy - 2;
document.onmousemove = moveDrag;
}

function moveDrag(e) {
//鼠标移动时改变obj的位置
var e = window.event || e;
var x = allLeft + e.clientX, y = allTop + e.clientY;
var nx = (scrollRight > x ? (scrollLeft < x ? x : scrollLeft) : scrollRight);
var ny = (scrollBottom > y ? (scrollTop < y ? y : scrollTop) : scrollBottom);
obj.style.left = nx - ox + "px";
obj.style.top = ny - oy + "px";
if (x < allLeft || x > allLeft + document.body.clientWidth ||
y < allTop || y > allTop + document.body.clientHeight) {
stopDrag();
}
}

function stopDrag() {
//当松开时清除onmousemove方法
document.onmousemove = null;
}

this.add = function (o) {
//添加对象
o.onmousedown = startDrag;
o.onmouseup = stopDrag;
//o.onmouseout = stopDrag; //此句加上即可判断FF上鼠标越出窗口，可是就会出现新的问题。。。
};
}

function $(id) {
return document.getElementById(id);
}

window.onload = function () {
var drag = new Drag();
drag.add($("wc"));
drag.add($("wc1"));
drag = null;
}
//此代码复制保存htm即可测试。
</script>
</head>
<body>
<div id="wc"></div>
<div id="wc1"></div>
</body>
</html>

...全文

319 21 打赏收藏转发到动态举报

写回复

用AI写文章

21 条回复

切换为时间正序

请发表友善的回复…

发表回复

muxrwc 2007-01-30

打赏
举报

<html>
<head>
<style type="text/css">
body {
margin:0px;
height:100%;
}
#wc_title {
width:100px;
height:20px;
background-color:#DCE2F1;
margin-bottom:5px;
/*cursor:move;*/
}
.wc {
z-index:100;
position:absolute;
width:100px;
height:60px;
background:#F0F8FF;
border:#CCCCCC 1px solid;
text-align:center;
font-size:12px;
}
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
#contents {
min-height: 100%; /*contents是外层框格*/
}
* html #contents {
height: 100%;
}
</style>
<script type="text/javascript">

function Drag() {
var obj;

function startDrag(e) {
//当按下时初始化参数
var e = window.event || e;
obj = this.root;
obj.x = e.clientX;
obj.y = e.clientY;
document.onmousemove = moveDrag;
document.onmouseup = stopDrag;
}

function moveDrag(e) {
//鼠标移动时改变obj的位置
var e = window.event || e;
obj.style.left = obj.offsetLeft - obj.x + (obj.x = e.clientX) + "px";
obj.style.top = obj.offsetTop - obj.y + (obj.y = e.clientY) + "px";

}

function stopDrag() {
//当松开时清除onmousemove方法
document.onmousemove = document.onmouseup = null;
}

this.add = function (o, root) {
//添加对象
o.root = root ? root : o;
o.onmousedown = startDrag;
};
}

function $(id) {
return document.getElementById(id);
}

window.onload = function () {
var drag = new Drag();
drag.add($("wc_title"), $("wc"));
drag.add($("wcs"));
drag = null;
};
</script>
</head>
<body>
<div id="wc" class="wc"><div id="wc_title"><img width="1" height="1" /></div>传说中的Drag</div>
<div id="wcs" class="wc"><img width="1" height="1" /></div>
</body>
</html>

muxrwc 2007-01-05

打赏
举报

我指的是当鼠标移出浏览器。然后松开，你在移动回去，就会出现异常。。
结贴

muxrwc 2007-01-04

打赏
举报

T_T
沉低了。。
有米好心 && 有空的兄弟告诉我啊。。

heroooooo 2007-01-04

打赏
举报

去掉这句o.onmouseout = stopDrag;不行吗??
修改你的:
<html>
<head>
<style type="text/css">
#wc{
z-index:0;
position:absolute;
height:150px;
width:200px;
background-color:#F4FAFF;
border:#CCCCCC 1px dashed;
cursor:move;
}
</style>
<script type="text/javascript">
function Drag() {
var event, obj, ox, oy;
var scrollWidth, scrollHeight;
function startDrag(e) {
//当按下时初始化参数
event = window.event || e;
obj = event.srcElement || event.target
ox = event.clientX - obj.offsetLeft;
oy = event.clientY - obj.offsetTop;
scrollLeft = document.body.scrollLeft + ox + 1;
scrollTop = document.body.scrollTop + oy + 1;
scrollWidth = document.body.scrollLeft + document.body.clientWidth - obj.clientWidth + ox - 2;
scrollHeight = document.body.scrollTop + document.body.clientHeight - obj.clientHeight + oy - 2;
document.onmousemove = moveDrag;
}

function moveDrag(e) {
//鼠标移动时改变obj的位置
var e = window.event || e;
var nx = (scrollWidth > e.clientX ? e.clientX : scrollWidth);
var ny = (scrollHeight > e.clientY ? e.clientY : scrollHeight);

nx = (nx<scrollLeft ? scrollLeft : nx);
ny = (ny<scrollTop ? scrollTop : ny);

obj.style.left = nx - ox;
obj.style.top = ny - oy;
}

function stopDrag() {
//当松开时清除onmousemove方法
document.onmousemove = null;
}

this.add = function (o) {
//添加对象
o.onmousedown = startDrag;
o.onmouseup = stopDrag;
};
}

function $(id) {
return document.getElementById(id);
}

window.onload = function () {
var drag = new Drag();
drag.add($("wc"));
drag = null;
}
</script>
</head>
<body>
<div id="wc"></div>
</body>
</html>

我用Firefox好象没有出现什么问题??

muxrwc 2007-01-04