87,904
社区成员
发帖
与我相关
我的任务
分享请教div拖动算法
<div id='container'>
<div id='header'>
</div>
<div id='content'>
</div>
</div>请教一个div拖动算法
我的做法是在header里面绑定onlick onmoumove和onmouseup事件。
点击的时候将参数moveable设置为true
在onmoumove的时候，将container移动到新的坐标，
onmouseup里面把moveable 设置为false，
问题是当鼠标移出header元素，onmoumove就没有被激活了。。
...全文
请发表友善的回复…
发表回复
xk1126 2010-06-10
- 打赏
- 举报
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
A {
text-decoration:none;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
//当前的宽度
var curLeft = 0;
//当前的高度
var curTop = 0;
//鼠标移动的X坐标
var curClientX = 0;
//鼠标移动的Y坐标
var curClientY = 0;
var curBool = false;
//鼠标点击事件
function show() {
curLeft = document.getElementById("container").style.pixelLeft;
curTop = document.getElementById("container").style.pixelTop;
curClientX = event.clientX;
curClientY = event.clientY;
document.onmousemove = showDown;
curBool = true;
}
//鼠标划过事件
function showDown() {
if (curBool) {
var curX = event.clientX; //鼠标划过的X轴坐标
var curY = event.clientY;//鼠标划过的Y轴坐标
document.getElementById("container").style.pixelLeft = curLeft + (curX - curClientX);
document.getElementById("container").style.pixelTop = curTop + (curY - curClientY);
}
}
//当前div的高度
var curHeight = 0;
//当前div位置的高度
var highttTop = 0;
//当前的高度
var curHeightTop = 0;
//移动的步数
var start = 20;
//窗体加载是初始化
function showHeight() {
curHeight = document.getElementById("container").offsetHeight;
highttTop = document.getElementById("container").style.pixelTop;
}
//小化事件
function showMin() {
curHeightTop = document.getElementById("container").offsetHeight;
if (curHeightTop <= start) {
curHeightTop = start;
return;
} else {
curHeightTop = curHeightTop - start;
document.getElementById("container").style.height = curHeightTop + "px";
}
setTimeout("showMin()",100);
}
//大化事件
function showMax() {
if (curHeightTop >= curHeight) {
curHeightTop = curHeight;
return;
} else {
curHeightTop = curHeightTop + start;
document.getElementById("container").style.height = curHeightTop + "px";
}
setTimeout("showMax()",100);
}
//当前top位置
var topHeigth = 0;
//下框的top位置
var topId = 0;
//最大宽度
var curWidth = 0
//当前left位置
var curLeftWidth = 0;
//最小化事件
function showHeightMin() {
showMin();
topHeigth = document.getElementById("container").style.pixelTop;
curLeftWidth = document.getElementById("container").style.pixelLeft;
topId = document.getElementById("content").style.pixelTop;
curWidth = document.body.offsetWidth - document.getElementById("container").offsetWidth;
if (curLeftWidth <= 0) {
curLeftWidth = 0;
}
if (topHeigth >= topId) {
topHeigth = topId;
return;
} else {
topHeigth = topHeigth + start;
document.getElementById("container").style.pixelTop = topHeigth;
}
setTimeout("showHeightMin()",100);
}
//最大化事件
function showHeightMax() {
if (curLeftWidth >= curWidth) {
curLeftWidth = curWidth;
}
if (topHeigth <= highttTop) {
topHeigth = highttTop;
return;
} else {
topHeigth = topHeigth - start;
document.getElementById("container").style.pixelTop = topHeigth;
}
showMax();
setTimeout("showHeightMax()",100);
}
//关闭事件
function showClose() {
document.getElementById("container").style.display = "none";
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<div id="container" style="position:absolute;height:200px;width:200px;z-index:1;background-color:#0080FF;" onmouseup="curBool = false">
<div style="height:20px;width:200px;text-align:right;background-color:#FF80FF;cursor:hand;" onmousedown="show()">
<A href="javascript:showMin(),showHeight()">-</A>
<A href="javascript:showMax()">+</A>
<A href="javascript:showHeightMin(),showHeight()">最小化</A>
<A href="javascript:showHeightMax()">最大化</A>
<A href="javascript:showClose()">关闭</A>
</div>
</div>
<div id="content" style="position:absolute;width:1190px;height:20px;top:580px;;background-color:#80FF80;">
</div>
</BODY>
</HTML>
我把你的题意理解为div的拖动！~
prototyper 2010-06-10
- 打赏
- 举报
贴个我以前写的供您参考：
var $ = function(o){return document.getElementById(o) || o}
$.Draging = function (drager, container, methods, Initialize) {
var x = y = 0, d = c = null;
if (drager=='undefined'||container=='undefined') return;
d = $(drager), c = $(container);
x = c.offsetWidth - d.offsetWidth;
y = c.offsetHeight - d.offsetHeight;
d.style.position = 'absolute';
typeof Initialize=='function' && Initialize(d, c, x, y);
d.onmousedown = function (e) {
var o = null, m = n = 0, e = e || window.event;
e.preventDefault ? e.preventDefault() : (e.returnValue=!!0);
o = e.srcElement || e.target;
m = e.clientX - parseInt(o.style.left);
n = e.clientY - parseInt(o.style.top );
! +'\v1' && o.setCapture();
document.onmousemove = function (e) {
var _x = _y = 0, e = e || window.event;
_x = e.clientX - m, _y = e.clientY - n;
x > 0 && _x <= x && _x >= 0 && (o.style.left = _x + 'px');
y > 0 && _y <= y && _y >= 0 && (o.style.top = _y + 'px');
typeof methods=='function' && methods(100*_x/x>>0, 100*_y/y>>0);
return false
}
document.onmouseup = function () {
! +'\v1' && o.releaseCapture();
document.onmouseup = document.onmousemove = o = null;
}
}
}
rainsilence 2010-06-10
- 打赏
- 举报
你的问题我明白了，参照注意点1就行了
cloudgamer 2010-06-10
- 打赏
- 举报
这里有一个拖动教程
你可以参考一下
你可以参考一下
rainsilence 2010-06-10
- 打赏
- 举报
定义一个boolean变量，true:拖动状态，false:一般状态
在onmousedown事件里变成拖动状态
在onmouseup事件里变成一般状态
接下来是移动
在onmousedown事件里记录下当前鼠标在屏幕的位置
在onmousemove事件里，
1。用当前鼠标位置-刚才记录的位置。并用结果更改div的位置。(鼠标移动多少，即为div移动的程度)
2。记录下当前鼠标在屏幕的位置
然后按下鼠标不停的移动就是onmousemove逻辑的循环。
注意点：
1。onmousemove 和onmouseup里由于浏览器的问题最好把事件发生函数绑定在document上(因为鼠标在拖动的时候很有可能会离开div)
而onmousedown必须绑定在div上
2。移动的时候，最好打断默认事件。这样在FF中鼠标可能会拖得圆滑点
3。我以前做的时候，拖动管理器用了单例模式。你也考虑用单例
4。在拖动的时候必须用捕获，IE下是setCapture，FF下你可以查下。主要是为了拖出浏览器的时候释放仍然可以响应浏览器事件。
在onmousedown事件里变成拖动状态
在onmouseup事件里变成一般状态
接下来是移动
在onmousedown事件里记录下当前鼠标在屏幕的位置
在onmousemove事件里，
1。用当前鼠标位置-刚才记录的位置。并用结果更改div的位置。(鼠标移动多少，即为div移动的程度)
2。记录下当前鼠标在屏幕的位置
然后按下鼠标不停的移动就是onmousemove逻辑的循环。
注意点：
1。onmousemove 和onmouseup里由于浏览器的问题最好把事件发生函数绑定在document上(因为鼠标在拖动的时候很有可能会离开div)
而onmousedown必须绑定在div上
2。移动的时候，最好打断默认事件。这样在FF中鼠标可能会拖得圆滑点
3。我以前做的时候，拖动管理器用了单例模式。你也考虑用单例
4。在拖动的时候必须用捕获，IE下是setCapture，FF下你可以查下。主要是为了拖出浏览器的时候释放仍然可以响应浏览器事件。
碧海情天-赵亮 2010-06-10
- 打赏
- 举报
container包在header的外面.你如果写得正确,这本不应有什么问题.
sunkenv 2010-06-10
- 打赏
- 举报
偶是来学习的！
muxrwc 2010-06-10
- 打赏
- 举报
我的做法是在header里面绑定onlick onmoumove和onmouseup事件。
-----------------------------------
应该是onmousedown吧...
然后move和up方法.绑在document上.
就可以了.
-----------------------------------
应该是onmousedown吧...
然后move和up方法.绑在document上.
就可以了.
archko 2010-06-10
- 打赏
- 举报
搜索会用吧,关这个拖动不知道有多少人问过的在这板块
guosheng1987 2010-06-10
- 打赏
- 举报
[Quote=引用 1 楼 lihui_shine 的回复:]
那就在container里面绑定onlick onmoumove和onmouseup事件。
[/Quote]
那鼠标移除container怎么办，难道我要在body里面绑定吗？
那就在container里面绑定onlick onmoumove和onmouseup事件。
[/Quote]
那鼠标移除container怎么办，难道我要在body里面绑定吗？
leemiki 2010-06-10
- 打赏
- 举报
逛逛@！
passself 2010-06-10
- 打赏
- 举报
当然了离开了那个区域当然就变化了，你可以在最外层的div中设置，比如那个id为container的标签里设置事件就可以了
suland 2010-06-10
- 打赏
- 举报
我这里有现成的例子
浪尖赏花 2010-06-10
- 打赏
- 举报
那就在container里面绑定onlick onmoumove和onmouseup事件。
