1oo分悬赏 高难度的div移动问题 请高手作答

spotty2008 2009-05-26 10:56:24
<html>
<head>
<title>Drag</title>
<style type="text/css">
</style>
<script type="text/javascript">
var Drag = {
//当前被drag的对象
obj: null,
//初始化
init: function(id){
var o = document.getElementById(id);
//当onmousedown开始拖拽
o.onmousedown = Drag.start;
},
start: function(e){
var o = Drag.obj = this;
//lastMouseX，lastMouseY记录上次鼠标的位置
o.lastMouseX = Drag.getEvent(e).x;
o.lastMouseY = Drag.getEvent(e).y;
//当onmousemove开始移动
document.onmousemove = Drag.move;
//当onmouseup终止拖拽
document.onmouseup = Drag.end;
},
move: function(e){
var o = Drag.obj;
//dx, dy表示鼠标移动的距离
var dx = Drag.getEvent(e).x - o.lastMouseX;
var dy = Drag.getEvent(e).y - o.lastMouseY;
//因为element.style.left通常返回的结果是'200px'的形式，所以要用parseInt转化
var left = parseInt(o.style.left) + dx ;
var top = parseInt(o.style.top) + dy;
o.style.left = left;
o.style.top = top;
o.lastMouseX = Drag.getEvent(e).x;
o.lastMouseY = Drag.getEvent(e).y;
},
end: function(e){
document.onmousemove = null;
document.onMouseup = null;
Drag.obj = null;
},
//辅助函数，处理IE和FF不同的event模型
getEvent: function(e){
if (typeof e == 'undefined'){
e = window.event;
}
//alert(e.x?e.x : e.layerX);
if(typeof e.x == 'undefined'){
e.x = e.layerX;//复制了n遍，到了csdn就变成ee.x了
}
if(typeof e.y == 'undefined'){
e.y = e.layerY;//复制了n遍，到了csdn就变成ee.x了
}
return e;
}
};

</script>
</head>
<body>
<div id="r" style="position:absolute; left:100px; top:100px; background-color:red; height:80px; width:80px;"></div>
<div id="g" style="position:absolute; left:250px; top:100px; background-color:green; height:80px; width:80px;"></div>
<div id="b" style="position:absolute; left:400px; top:100px; background-color:blue; height:800px; width:800px;">
<br>
<iframe src="http://www.upipp.cn/"></iframe>
</div>
</body>
<script type="text/javascript">
//测试代码开始，使三个div具有drag and drop的能力。
Drag.init('r');
Drag.init('g');
Drag.init('b');
</script>
</html>





这是我在网上找到的拖拽代码 但是 当鼠标在拖拽时 移到iframe框架上 移动就自动暂停了 请问有什么办法让 框架不影响到div得移动
...全文
108 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
archko 2009-05-26
  • 打赏
  • 举报
 回复 
<html> 

<head> 

<title>Drag </title> 

<style type="text/css"> 

</style> 

<script type="text/javascript"> 

var Drag = {

    zi:0,

    //当前被drag的对象

    obj: null,

    //初始化

    init: function(id){

        var o = document.getElementById(id);

        //当onmousedown开始拖拽

        o.onmousedown = Drag.start;

    }

    ,

    start: function(e){

        var o = Drag.obj = this;

        o.setCapture();

        Drag.zi=o.style.zIndex;

        o.lastMouseX = Drag.getEvent(e).x;

        o.lastMouseY = Drag.getEvent(e).y;

        o.style.zIndex=1000;

        document.onmousemove = Drag.move;

        document.onmouseup = Drag.up;

    }

    ,

    move: function(e){

        var o = Drag.obj;

        var dx = Drag.getEvent(e).x - o.lastMouseX;

        var dy = Drag.getEvent(e).y - o.lastMouseY;

        var left = parseInt(o.style.left) + dx ;

        var top = parseInt(o.style.top) + dy;

        o.style.left = left;

        o.style.top = top;

        o.lastMouseX = Drag.getEvent(e).x;

        o.lastMouseY = Drag.getEvent(e).y;

    }

    ,

    up: function(e){

        document.onmousemove = null;

        document.onmouseup = null;

        Drag.obj.style.zIndex=Drag.zi;

        Drag.obj.releaseCapture();

        Drag.obj = null;

    }

    ,

    getEvent: function(e){

        if (typeof e == 'undefined'){

            e = window.event;

        }

        if(typeof e.x == 'undefined'){

            e.x = e.layerX;

        }

        if(typeof e.y == 'undefined'){

            e.y = e.layerY;

        }

        return e;

    }

}

;



</script> 

</head> 

<body> 

<div id="r" style="position:absolute; left:100px; top:100px; background-color:red; height:80px; width:80px;"> </div> 

<div id="g" style="position:absolute; left:250px; top:100px; background-color:green; height:80px; width:80px;"> </div> 

<div id="b" style="position:absolute; left:400px; top:100px; background-color:blue; height:200px; width:300px;"> 

    <br> 

    <iframe src="http://www.baidu.com" width="300" height="200"></iframe> 

</div> 

</body> 

<script type="text/javascript"> 

//测试代码开始，使三个div具有drag and drop的能力。

Drag.init('r');

Drag.init('g');

Drag.init('b');

</script> 

</html>


看看是不是你想要的.
囧 2009-05-26
  • 打赏
  • 举报
 回复 



<html> 

<head> 

<title>Drag </title> 

<style type="text/css"></style> 

<script type="text/javascript"> 

var Drag = {

    //当前被drag的对象 

    obj: null,

    //初始化 

    init: function(id) {

        var o = document.getElementById(id);

        //当onmousedown开始拖拽 

        o.onmousedown = Drag.start;

    },

    start: function(e) {

        var o = Drag.obj = this;

        //lastMouseX，lastMouseY记录上次鼠标的位置 

        o.lastMouseX = Drag.getEvent(e).x;

        o.lastMouseY = Drag.getEvent(e).y;

		if(document.all){

			Drag.obj.setCapture();

		}

        //当onmousemove开始移动 

        document.onmousemove = Drag.move;

        //当onmouseup终止拖拽 

        document.onmouseup = Drag.end;

    },

    move: function(e) {

        var o = Drag.obj;

        //dx, dy表示鼠标移动的距离 

        var dx = Drag.getEvent(e).x - o.lastMouseX;

        var dy = Drag.getEvent(e).y - o.lastMouseY;

        //因为element.style.left通常返回的结果是'200px'的形式，所以要用parseInt转化 

        var left = parseInt(o.style.left) + dx;

        var top = parseInt(o.style.top) + dy;

        o.style.left = left;

        o.style.top = top;

        o.lastMouseX = Drag.getEvent(e).x;

        o.lastMouseY = Drag.getEvent(e).y;

    },

    end: function(e) {

        document.onmousemove = null;

        document.onMouseup = null;

        if(document.all){

			Drag.obj.releaseCapture();

		}

		Drag.obj = null;

    },

    //辅助函数，处理IE和FF不同的event模型 

    getEvent: function(e) {

        if (typeof e == 'undefined') {

            e = window.event;

        }

        //alert(e.x?e.x : e.layerX); 

        if (typeof e.x == 'undefined') {

            e.x = e.layerX; //复制了n遍，到了csdn就变成ee.x了 

        }

        if (typeof e.y == 'undefined') {

            e.y = e.layerY; //复制了n遍，到了csdn就变成ee.x了 

        }

        return e;

    }

};

</script> 

</head> 

<body> 

<div id="r" style="position:absolute; left:100px; top:100px; background-color:red; height:80px; width:80px; z-index:1000;"> </div> 

<div id="g" style="position:absolute; left:250px; top:100px; background-color:green; height:80px; width:80px; z-index:1000;"> </div> 

<div id="b" style="position:absolute; left:400px; top:100px; background-color:blue; height:800px; width:800px;"> 

<br> 

<iframe src="http://www.upipp.cn/"> </iframe> 

</div> 

</body> 

<script type="text/javascript"> 

    //测试代码开始，使三个div具有drag and drop的能力。 

	Drag.init('r'); 

	Drag.init('g'); 

	Drag.init('b'); 

</script> 

</html>
archko 2009-05-26
  • 打赏
  • 举报
 回复 
<html> 

<head> 

<title>Drag </title> 

<style type="text/css"> 

</style> 

<script type="text/javascript"> 

var Drag = {

    //当前被drag的对象

    obj: null,

    //初始化

    init: function(id){

        var o = document.getElementById(id);

        //当onmousedown开始拖拽

        o.onmousedown = Drag.start;

    }

    ,

    start: function(e){

        var o = Drag.obj = this;

        o.setCapture();

        o.lastMouseX = Drag.getEvent(e).x;

        o.lastMouseY = Drag.getEvent(e).y;

        document.onmousemove = Drag.move;

        document.onmouseup = Drag.end;

    }

    ,

    move: function(e){

        var o = Drag.obj;

        var dx = Drag.getEvent(e).x - o.lastMouseX;

        var dy = Drag.getEvent(e).y - o.lastMouseY;

        var left = parseInt(o.style.left) + dx ;

        var top = parseInt(o.style.top) + dy;

        o.style.left = left;

        o.style.top = top;

        o.lastMouseX = Drag.getEvent(e).x;

        o.lastMouseY = Drag.getEvent(e).y;

    }

    ,

    end: function(e){

        document.onmousemove = null;

        document.onmouseup = null;

        Drag.obj.releaseCapture();

        Drag.obj = null;

    }

    ,

    getEvent: function(e){

        if (typeof e == 'undefined'){

            e = window.event;

        }

        if(typeof e.x == 'undefined'){

            e.x = e.layerX;

        }

        if(typeof e.y == 'undefined'){

            e.y = e.layerY;

        }

        return e;

    }

}

;



</script> 

</head> 

<body> 

<div id="r" style="position:absolute; left:100px; top:100px; background-color:red; height:80px; width:80px;"> </div> 

<div id="g" style="position:absolute; left:250px; top:100px; background-color:green; height:80px; width:80px;"> </div> 

<div id="b" style="position:absolute; left:400px; top:100px; background-color:blue; height:200px; width:300px;"> 

    <br> 

    <iframe src="http://www.baidu.com" width="300" height="200"></iframe> 

</div> 

</body> 

<script type="text/javascript"> 

//测试代码开始，使三个div具有drag and drop的能力。

Drag.init('r');

Drag.init('g');

Drag.init('b');

</script> 

</html>

本来就是这样的啊.什么叫暂停?你是说小块的被 框架覆盖了?
移动到框架时,被覆盖了,你当然看不见框架后面的东西,但你把鼠标移动到框架另一边时,又出来了.只是你看不见
你是不是想要它在框架层上面啊.设置zIndex就可以了.
cloudgamer 2009-05-26
  • 打赏
  • 举报
 回复
我这里有一个解决方法
后面有iframe的部分 参考一下
tobeno2 2009-05-26
  • 打赏
  • 举报
 回复
<html>
<head>
<title>Drag </title>
<style type="text/css">
</style>
<script type="text/javascript">
var Drag = {
//当前被drag的对象
obj: null,
//初始化
init: function(id){
var o = document.getElementById(id);
//当onmousedown开始拖拽
o.onmousedown = Drag.start;
},
start: function(e){
var o = Drag.obj = this;
//lastMouseX，lastMouseY记录上次鼠标的位置
o.lastMouseX = Drag.getEvent(e).x;
o.lastMouseY = Drag.getEvent(e).y;
//当onmousemove开始移动
document.onmousemove = Drag.move;
//当onmouseup终止拖拽
document.onmouseup = Drag.end;
},
move: function(e){
var o = Drag.obj;
//dx, dy表示鼠标移动的距离
var dx = Drag.getEvent(e).x - o.lastMouseX;
var dy = Drag.getEvent(e).y - o.lastMouseY;
//因为element.style.left通常返回的结果是'200px'的形式，所以要用parseInt转化
var left = parseInt(o.style.left) + dx ;
var top = parseInt(o.style.top) + dy;
o.style.left = left;
o.style.top = top;
o.lastMouseX = Drag.getEvent(e).x;
o.lastMouseY = Drag.getEvent(e).y;
},
end: function(e){
document.onmousemove = null;
document.onMouseup = null;
Drag.obj = null;
},
//辅助函数，处理IE和FF不同的event模型
getEvent: function(e){
if (typeof e == 'undefined'){
e = window.event;
}
//alert(e.x?e.x : e.layerX);
if(typeof e.x == 'undefined'){
e.x = e.layerX;//复制了n遍，到了csdn就变成ee.x了
}
if(typeof e.y == 'undefined'){
e.y = e.layerY;//复制了n遍，到了csdn就变成ee.x了
}
return e;
}
};

</script>
</head>
<body>
<div id="r" style="position:absolute; left:100px; top:100px; background-color:red; height:80px; width:80px;z-index:2000;"> </div>
<div id="g" style="position:absolute; left:250px; top:100px; background-color:green; height:80px; width:80px;z-index:2000;"> </div>
<div id="b" style="position:absolute; left:400px; top:100px; background-color:blue; height:800px; width:800px;z-index:1000;">
<br>
<iframe src="http://www.upipp.cn/"> </iframe>
</div>
</body>
<script type="text/javascript">
//测试代码开始，使三个div具有drag and drop的能力。
Drag.init('r');
Drag.init('g');
Drag.init('b');
</script>
</html>
monexus 2009-05-26
  • 打赏
  • 举报
 回复
同LS改变一下zIndex属性就好了，不过这段js在ff下drag时会乱跳

LZ可以看一下 cloudgamer 的那片文章
Scala的面向对象(OO)编程入门
说明在当今的大数据(Big Data)潮流下的Scala软件编程以及它的设计原则与要点。首先介绍Scala很特别的单例类的定义，也就是Singleton类。然后介绍Scala特别的trait结构；以及重要的接口设计原则："Program to an ...
div模拟input实现输入框
因为一些原因，无意中看到了H5的全局属性contenteditable,原本不知道这个属性该用在哪里，后来发现可以用带有contenteditable属性的div而不是input或者textarea来作为输入框（div可以根据内容自动调整高度哦）。但是div它是不支持placeholder属性的。那怎么在div内容为空的时候显示一个默认文字呢？   先看下效果： 看下代码（code）...
redis报错 oO0OoO0OoO0Oo Redis is starting oO0OoO0OoO0Oo
redis报错 oO0OoO0OoO0Oo Redis is starting oO0OoO0OoO0Oo oO0OoO0OoO0Oo Redis is starting oO0OoO0OoO0Oo 端口被占用 查询一下是不是redis占用的 是的话其实redis已经成功启动了。但是也可以杀死在重启 ps -ef | grep redis kill -9 进程号 重启redis ...
redis服务端启动报错oO0OoO0OoO0Oo Redis is starting oO0OoO0OoO0Oo
redis服务端启动报错oO0OoO0OoO0Oo Redis is starting oO0OoO0OoO0Oo，但是在进程列表里却看不见这个进程
使用redis 报错Address already in use redis无法启动问题 oO0OoO0OoO0Oo Redis is starting oO0OoO0OoO0Oo
报错Address already in use 表示的6379端口被占用 或者报以下错误 60192:C 17 Jan 2019 00:04:58.948 # oO0OoO0OoO0Oo Redis is starting oO0OoO0OoO0Oo 60192:C 17 Jan 2019 00:04:58.948 # Redis version=5.0.2, bits=64, commit=...
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章