您的位置：程序门 -> web 开发 -> javascript

快速拖动层引发的断离现象?

[收藏此页] [打印本页]选择字色：背景色：字体：[大][中][小]

快速拖动层引发的断离现象?[已结贴,结贴人:igyhi]

发表于：2007-07-18 17:49:39 楼主

一个层,鼠标按住后可以在页面上拖动,但是如果拖动速度过快,鼠标就会移出层区域,拖动终止?

怎么预防这样的现象?

1.鼠标可以移出层,但是有某个缓冲容器能记录鼠标路径,随后层会继续移动到鼠标位

2.用某个方式让鼠标无法快速移出层的区域

3.层拖动的定位方式重写

哪个是比较合适的解决方法?

ps : 4.无解

==============================================================

<%@ page language= "java " import= "java.util.* " pageencoding= "utf-8 "%>
<%
string path = request.getcontextpath（);
string basepath = request.getscheme（)+ ":// "+request.getservername（)+ ": "+request.getserverport（)+path+ "/ ";
%>

<!doctype html public "-//w3c//dtd html 4.01 transitional//en ">
<html>
<base href= " <%=basepath%> ">
<head>
<title> my jsp 'test.jsp ' starting page </title>
<script type= "text/javascript ">
var mx;
var my;
var flag=0;
function get_x（){
mx=event.x;
my=event.y;
}
function mousedown（)
{
mx=event.x;
my=event.y;
flag=1;
}
function mouseup（)
{
flag=0;
}
function mousemove（)
{
if（flag==0)return false;
var e=document.getelementbyid（ 'aa ');
mxmov=event.clientx;
mymov=event.clienty;
var w=e.offsetwidth;
e.style.width=parseint（w)+parseint（mxmov-mx);
}
</script>
<style type= "text/css ">
div{float:left;}
.aacss{border:1px solid red;width:200px;height:100px;}
</style>
</head>

<body onmousemove= "get_x（) ">
<div id= "body " onmouseup= "mouseup（) ">
<div id= "aa " class= "aacss "> aaaa </div>
<div onmousedown= "mousedown（) " onmousemove= "mousemove（) " id= "bb " style= "width:30px;border:1px solid gary; "> dragme </div>
</div>
</body>
</html>

发表于：2007-07-19 08:57:251楼得分:0

发表于：2007-07-19 09:07:182楼得分:3

点击后在body之类的元素注册移动事件

发表于：2007-07-19 09:57:493楼得分:4

<html>
<head>
<meta http-equiv= "content-type " content= "text/html; charset=gb2312 " />
<title> </title>
<script language= "javascript ">
var ie = navigator.appname == "microsoft internet explorer ";
var count = 24;
var r = 80; //圆半径
var speed = 8; //速度

var arc = 0;
var newleft = oldleft = 0;
var newtop = oldtop = 0;
var divs = [];

function init（)
{
for（var i=1;i <=count;i++)
{
var div = document.createelement（ "div ");
with（div.style)
{
width = 2;
height = 2;
backgroundcolor = "#ff0000 ";
position = "absolute ";
zindex = i + 10;
}
div.id = "div " + i;
div.innerhtml = " <img src= ' ' width=1 height=1 style=filter:alpha（opacity=0)/> ";
document.body.appendchild（div);
divs.push（div);
}

arc = 360 / divs.length;
delay（);
}

function changepos（point)
{
for（var i=1;i <=divs.length;i++)
{
var x = r * math.cos（arc * i * math.pi/180);
var y = r * math.sin（arc * i * math.pi/180);
divs[i-1].style.left = point.x + x;
divs[i-1].style.top = point.y + y;
arc += speed / 1000;
if（arc > 360 * 2)arc = 360;
}
}

function getpos（)
{
return {x:newleft,y:newtop};
}

document.onmousemove = function（e)
{
var ev = ie ? window.event : e;
oldleft = ie ? ev.x : ev.pagex;
oldtop = ie ? ev.y : ev.pagey;
}

function delay（)
{
newtop += （oldtop - newtop) / 20;
newleft += （oldleft - newleft) / 20;
changepos（getpos（));
settimeout（ "delay（); ",10);
}
</script>
</head>

<body onload= "init（); ">
</body>
</html>

存成html看效果, 用这种原理吧.

下一篇：如何改变梅花雪树中节点文字的大小字体 ?
上一篇：dom中添加node问题

其他资讯