拖动窗口
层的拖动：鼠标mousedown之后，使层和鼠标联在一起移动，up时改变层的位置顺便使鼠标和层分开。我现在知道如何移动层，其余的怎么做 问题点数：100、回复次数：17Top
1 楼seabell（百合心）回复于 2002-06-18 10:47:26 得分 0
<style>
.drag{position:relative;cursor:hand}
</style>
<script language="JavaScript">
var dragapproved=false
var eventsource,x,y
function move()
{
if (event.button==1&&dragapproved) //改变被拖动元素在页面上的位置
{
eventsource.style.pixelLeft=temp1+event.clientX-x
eventsource.style.pixelTop=temp2+event.clientY-y
return false
}
}
function drags()
{
if (!document.all)
return
if (event.srcElement.className=="drag") //捕捉鼠标和被拖动元素的当前位置
{
dragapproved=true
eventsource=event.srcElement
temp1=eventsource.style.pixelLeft
temp2=eventsource.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=move
}
}
document.onmousedown=drags //鼠标左键按下时,准备拖动
document.onmouseup=new Function("dragapproved=false")//鼠标左键放开时,拖动停止
</script>
<span style="font-family:DextorOutD;font-size: 9pt">
<div id=mydiv class=drag style="background:red;width:50%">
<p>drag it!</p>
<p align=center><input type=button value=drag><p>
<p>ha ha!</p>
</div>
</span>Top
2 楼fhfpku（我没当老大已经很久了）回复于 2002-06-18 10:58:42 得分 0
to ： seabell(百合心)
拖动的不够流畅，有没有更好的？Top
3 楼seabell（百合心）回复于 2002-06-18 11:21:05 得分 0
觉得很流畅啊，将中间的button换掉看看
<style>
.drag{position:relative;cursor:hand}
</style>
<script language="JavaScript">
var dragapproved=false
var eventsource,x,y
function move()
{
if (event.button==1&&dragapproved) //改变被拖动元素在页面上的位置
{
eventsource.style.pixelLeft=temp1+event.clientX-x
eventsource.style.pixelTop=temp2+event.clientY-y
return false
}
}
function drags()
{
if (!document.all)
return
if (event.srcElement.className=="drag") //捕捉鼠标和被拖动元素的当前位置
{
dragapproved=true
eventsource=event.srcElement
temp1=eventsource.style.pixelLeft
temp2=eventsource.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=move
}
}
document.onmousedown=drags //鼠标左键按下时,准备拖动
document.onmouseup=new Function("dragapproved=false")//鼠标左键放开时,拖动停止
</script>
<span style="font-family:DextorOutD;font-size: 9pt">
<div id=mydiv class=drag style="background:red;width:50%">
<p>drag it!</p>
<p align=center>text<p>
<p>ha ha!</p>
</div>
</span>Top
4 楼fhfpku（我没当老大已经很久了）回复于 2002-06-18 11:29:31 得分 0
我的是ie 5.01 还是不流畅，能不能做到单击锁定，按鼠标左键一次然后放开，鼠标动时层也跟着动，然后再次单击后固定层的位置，在解去鼠标和层的锁定Top
5 楼fhfpku（我没当老大已经很久了）回复于 2002-06-18 11:56:21 得分 0
错了，现在流畅了，原来刚才是点在文字上了Top
6 楼seabell（百合心）回复于 2002-06-18 12:20:34 得分 0
哦，那就好，我刚才试了一会儿，单击锁定做不出来Top
7 楼fhfpku（我没当老大已经很久了）回复于 2002-06-18 12:54:06 得分 0
我这里有个例子，你看看吗？把信箱留下。
我的是jekingfu@163.comTop
8 楼seabell（百合心）回复于 2002-06-18 13:28:34 得分 0
ok,bluebell@yeah.netTop
9 楼qiushuiwuhen（秋水无恨）回复于 2002-06-19 09:16:11 得分 10
window.event.srcElement.setCapture();
window.event.srcElement.releaseCapture();
Top
10 楼fhfpku（我没当老大已经很久了）回复于 2002-06-19 10:05:52 得分 0
to: qiushuiwuhen(秋水无恨)
帮忙放个例子吧Top
11 楼zz315（钟钟）回复于 2002-06-19 10:38:36 得分 5
http://www.webucn.com/zz/nbw_v3/
看这个窗口拖动，十分流畅，有一个关键的问题就是秋水用上面的方法解决的。
过程这样：onmousedown时，获取鼠标在屏幕上的位置，同时setCapture()，onmouseup时，releaseCapture();。关键的过程在于onmousemove，首先判断event.button是否等于1，不等于，返回；如果等于，即时判断鼠标当前位置，然后要得出与onmousedown时的差值，窗口的实际位置加上这个差值重新定位。Top
12 楼fhfpku（我没当老大已经很久了）回复于 2002-06-19 11:55:31 得分 0
我现在只想单击锁定，因为鼠标移动到iframe里面就不能响应各种事件，如何做啊Top
13 楼zz315（钟钟）回复于 2002-06-19 17:50:25 得分 0
秋水不帖出来了嘛，我给你的例子里也有相关代码的。Top
14 楼fhfpku（我没当老大已经很久了）回复于 2002-06-19 19:10:30 得分 0
给个简单点的例子，谢谢Top
15 楼seabell（百合心）回复于 2002-06-19 19:13:40 得分 0
楼主：不好意思，让你信中催我了，我今天很忙，实在没有时间研究了，明天有答案告诉你，见谅Top
16 楼seabell（百合心）回复于 2002-06-20 15:30:44 得分 85
楼主：试试这个
<style>
.drag{position:relative;cursor:hand}
</style>
<script language="JavaScript">
var dragapproved=false
var eventsource,x,y
function move()
{
if (dragapproved) //改变被拖动元素在页面上的位置
{
eventsource.style.pixelLeft=temp1+event.clientX-x
eventsource.style.pixelTop=temp2+event.clientY-y
return false
}
}
function drags()
{
if (!document.all)
return
if (event.srcElement.className=="drag") //捕捉鼠标和被拖动元素的当前位置
{
dragapproved=true
eventsource=event.srcElement
temp1=eventsource.style.pixelLeft
temp2=eventsource.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=move
}
}
document.onmousedown=drags //鼠标左键按下时,准备拖动
document.onmouseup=new Function("dragapproved=!dragapproved")//鼠标左键放开时,拖动停止
</script>
<span style="font-family:DextorOutD;font-size: 9pt">
<input type=button value="drag me" class=drag>
</span>Top
17 楼linhaibo（美洲豹）回复于 2002-06-20 15:44:01 得分 0
有没有人做一个类似Windows里面的拖动窗口不显示窗口内容啊...
呵呵,先用一个虚框代替实际的层...那样速度绝对流畅.Top
