Javascript的层拖动问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Javascript的层拖动问题相关的知识，希望对你有一定的参考价值。
这是我写的层拖动的代码, 设想是当移动对象t的时候拖动对象o. 并且可以多次被其他对象使用. 在chrome和ie下测试都还可以, 但是在firefox下层移动起来缓慢. 一不小心就全选了层外头的内容了. 请各位帮忙看看这么写到底有什么问题. 为什么效果不理想? 以及该如何改进.
web.dragAndDrop = function(o, t, mode)
var self = this;
this.obj = o;
this.obj.mode = mode;
t.onmousedown = function(e)
self.start(e);
;
web.dragAndDrop.prototype =
start:function(e)
var self = this;
e = e || window.event;
this.obj.lastX = e.clientX;
this.obj.lastY = e.clientY;
document.onmousemove = function(e)
self.drag(e);
document.onmouseup = function()
self.end();
return false
,
drag:function(e)
var o = this.obj;
var ey = e.clientY, ex = e.clientX;
var y, x, nx, ny;
y = parseInt(o.mode ? o.style.top : o.style.bottom);
x = parseInt(o.mode ? o.style.left : o.style.right);
nx = x + ((ex - o.lastX) * (o.mode ? 1 : -1));
ny = y + ((ey - o.lastY) * (o.mode ? 1 : -1));
o.style[o.mode ? 'left' : 'right'] = nx + 'px';
o.style[o.mode ? 'top' : 'bottom'] = ny + 'px';
o.lastX = ex;
o.lastY = ey;
return false
,
end:function()
document.onmousemove = null;
document.onmouseup = null;
使用方法比方说:
<div id="layout_1" style="position: fixed; left: 100px; top:100px; height:100px; width:100px; background: #666">
<div id="layout_2" style="position: fixed; height:50px; width:50px; background: #CCC">
Some text here.
</div>
</div>
var newDrag = new web.dragAndDrop(document.getElementById('layout_1'), document.getElementById('layout_2'), true);
在托动巨快的时候就有可能选中body内的其他内容, 有什么办法避免呢?
对, 但我不想通过类似: 当onmouseout取消事件, 或者判断失去焦点来避免全选. 我主要想问的是这段代码的运行效率是否有办法提高.
参考技术B 添加改函数到JS中document.onmouseup=function()
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
this.onmousemove=null;
追问
不是这个思路. 你的意思是当鼠标抬起时清空所选内容. 但我希望达到的效果是当mousedown并开始移动div层的时候, 即使鼠标没有抬起, 一旦因为界面延迟导致光标移出了对象层的外面也不会选择到层外的内容.
追答在Div中加入下面的事件就可以实现了
oncontextmenu='return false' ondragstart='return false' onselectstart ='return false'
分就给您吧. 您这办法只能在IE下有效果. 我最终是通过原型中在start函数处理完document.onmousemove事件后加入一句:
document.body.onmousedown = function()
return false;
来屏蔽掉层拖动时body内的所有操作的. 当鼠标抬起触发end函数时document.body.onmousedown = null;一切就回归正常了.
web对象是什么？
发一份全的到dingjunfen@163.com，晚上回去看，白天用不了QQ一类的东西。
或者你也可以在这里说明，然后我回复追问
web对象就是web对象, var web =
追答还是再现不了你的现象。
总是报你给出的这部分代码有问题。
加了var web =
又说this.obj是null.
这应该就不是我的问题了. 我用构造函数模式和原型模式创建的dragAndDrop方法. 我习惯把类似功能的函数放进一个对象里, 所以我把它放进web对象中. 用var test = new web.dragAndDrop(a,b,c)方式调用后这时的this.obj会被解析为test.obj. 我自己没发现有逻辑错误的地方. Firefox 8, IE 9, Chrome 15.0.874.121测试下没有问题.
追答没说你的逻辑有什么问题。
但这部分代码是可运行的吗？你把这部分贴到一个ＨＴＭＬ里是可运行的？
如果运行不了，不是你的问题吗？
从你的描述中，可以知道你大概遇到了什么问题。
但运行不了，也就无从调试，怎么来解决？光靠说你觉得可行吗？
如果你的代码是保密的，你就弄出一个最简单的模拟。邮箱都给你了，你也不发信。
你出个最简单的，有你说的现象的代码也行啊。
服了。
呃...写代码就是为了能运行吧...不能运行的话我的问题就会是为什么我写的代码不能运行了...我把代码整理好上传到http://sound.bai-hua.org/temp/temp.html了, 您从这个页面开始调试吧.
追答能访问,
40行,char 3
clientY为空为不是对象.....
点上去会报这个脚本错.
我从网上看源代码,来调一调吧,有问题再联系你.
呃...不好意思我没有具体考虑不同版本IE的兼容性问题. 在第40行var ey = e.clientY, ex = e.clientX;前面加上e = e || window.event;应该可以解决报错的问题.
拖动层
<html>
<head>
<title>动态移动的层</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="JavaScript">
var Obj="none";
var pX;
var pY;
document.onmousemove=DIVMove;
document.onmouseup=DIVUp;
function DIVDown(tag){
Obj=tag;
pX=parseInt(document.all(Obj).style.left)-event.x;
pY=parseInt(document.all(Obj).style.top)-event.y;
}
function DIVMove(){
if(Obj!="none"){
document.all(Obj).style.left=pX+event.x;
document.all(Obj).style.top=pY+event.y;
event.returnValue=false;
}
}
function DIVUp(){Obj="none";}
function Hide(divid){
divid.filters.revealTrans.apply();
divid.style.visibility = "hidden";
divid.filters.revealTrans.play();
}
</script>
</head>
<body bgcolor="#ADBAC9">
<div id="div1" class=yellow style="VISIBILITY:visible ; background-color:#FFFF00; position: absolute; top: 10; left: 12; width: 360; height: 250; filter: revealTrans(transition=12, 'duration=0.1) blendTrans(duration=0.1)">
<div id="title1" onmousedown=DIVDown("div1") style="background-color:#30608F;padding:2px; font-size:13px;text-indent:5;color:#FFFFFF;cursor:move">somken</div>
<img id=close onclick=Hide(div1) style="position: absolute; right: 2; top: 2" border="0" src="close.gif" width="15" height="15">
</div>
<!-- --->
<div id="div2" class=yellow style="VISIBILITY:visible ; background-color:#FFFF00; position: absolute; top: 60; left: 200; width: 360; height: 250; filter: revealTrans(transition=12, 'duration=0.1) blendTrans(duration=0.1)">
<div id="title2" onmousedown=DIVDown("div2") style="background-color:#555500;padding:2px; font-size:13px;text-indent:5;color:#FFFFFF;cursor:move">somken</div>
<img id=close onclick="Hide(div2)" style="position: absolute; right: 2; top: 2" border="0" src="close.gif" width="15" height="15">
</div>
</body>
</html>
参考
https://edu.csdn.net/course/play/25603/307048
https://edu.csdn.net/course/play/25785/313742
https://edu.csdn.net/course/play/25125/292196
以上是关于Javascript的层拖动问题的主要内容，如果未能解决你的问题，请参考以下文章