点击拖动的逻辑
求一个点击拖动的逻辑
求一种点击拖动DIV的逻辑
我是这么想的
1：mousedown,mousemove,mouseup, 拖动的点判断是通过鼠标pageX,pageY来定义的
但是我有一个地方卡住了
就是点击拖动那个事件该怎么实现？
求例子，求大神赐教！
------解决方案--------------------
- HTML code
<div id="move" style="position:fixed; bottom:0; left:0"><img src="http://c.****.net/bbs/t/5/i/pic_logo.gif"></div><!-- ←拖动层--> <div class="bbos" style="display:none">sdf</div>
求一种点击拖动DIV的逻辑
我是这么想的
1：mousedown,mousemove,mouseup, 拖动的点判断是通过鼠标pageX,pageY来定义的
但是我有一个地方卡住了
就是点击拖动那个事件该怎么实现？
求例子，求大神赐教！
------解决方案--------------------
- JScript code
<script>
/**
**@author lonephoenix
**/
var Drag=function(obj) {
var x,y,ox,oy;
var nx,ny;
var objmove=new Boolean(false);
obj.onmousedown=function(e) {
e=e||event;
if(e.button==0) {
obj.style.cursor="move";
ox=obj.offsetLeft;
oy=obj.offsetTop;
x=e.clientX;
y=e.clientY;
objmove=true;
};
};
obj.onmousemove=function(e) {
e=e||event;
if(objmove==true) {
nx=ox+e.clientX-x;
ny=oy+e.clientY-y;
obj.style.left=nx+"px";
obj.style.top=ny+"px";
}
};
obj.onmouseup=function(e) {
e=e||event;
if(e.button==0) {
objmove=false;
obj.style.cursor="default";
}
};
};
------解决方案--------------------
- HTML code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
* {
margin: 0;
padding: 0;
}
#drag {
width: 150px;
height: 150px;
position: relative;
background: red;
}
</style>
<script>
window.onload = init;
function init(){
var o_div = document.querySelector("#drag");
o_div.onmousedown = function(e){
var e_down = e || event;
var currentX = e_down.clientX;
var currentY = e_down.clientY;
var dragX = currentX - o_div.offsetLeft; //获取鼠标离div左边界的距离
var dragY = currentY - o_div.offsetTop; ////获取鼠标离div顶部的距离
var maxLeft = document.documentElement.clientWidth - o_div.offsetWidth; //获取最大left，为其不能超出整个根节点
var maxTop = document.documentElement.clientHeight - o_div.offsetHeight; //获取最大top，不能超过文档根节点底部
document.onmousemove = function(e){
var event = e || window.event;
var left = event.clientX - dragY;
var top = event.clientY - dragY;
if(left < 0){
left = 0;
}
if(left > maxLeft){
left = maxLeft;
}
if(top < 0){
top = 0;
}
if(top > maxTop){
top = maxTop;
}
o_div.style.left = left + "px";
o_div.style.top = top + "px";
}
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
}
}
return false;
}
</script>
</head>
<body>
<div id="drag"></div>
</body>
</html>
------解决方案--------------------
对象本身的mousedown和docuemnt的mouseup,点击之后到松开之前就应该是被拖动的过程
所以在：
全局变量一个：记录当前对象是否应该被拖动,默认是false：isDrag=!1;
1：对象本身的mousedown事件中绑定一个初始化的事件，设置:isDrag=!0;
2：根据isDrag的值来处理拖动事件
3：在document的mouseup时，这时候对象已经不应该被拖动了，所以，重置isDrag=!1
- HTML code
<script type="text/javascript">
var Drag=function(a) {
this.target = a;
this.pos = [];
this.isDrag = !1;
if(this.target) {
this.addEvent(this.target,'mousedown',this.bind(this,this.start));
this.addEvent(document,'mousemove',this.bind(this,this.move));
this.addEvent(document,'mouseup',this.bind(this,this.end));
}
};
Drag.prototype = {
start: function(e) {
this.target.style.cursor="move";
this.pos = [e.pageX - parseInt(this.target.style.left||0),e.pageY - parseInt(this.target.style.top||0)];
this.isDrag = !0;
e.stop();
},
move: function(e) {
if(this.isDrag) {
this.target.style.left = e.pageX-this.pos[0] + 'px';
this.target.style.top = e.pageY -this.pos[1]+ 'px';
}
},
end: function(e) {
this.isDrag = !1;
this.pos = [];
},
bind:function(o,fn){
return function(e) {
var ev = e || window.event;
ev.pageX = e.pageX || ev.clientX;
ev.pageY = e.pageY || ev.clientY;
ev.stop = e.preventDefault? function() {
e.preventDefault();
e.stopPropagation();
} : function() {
ev.cancelBubble = true;
ev.returnValue = false;
}
fn.call(o,e);
}
},
addEvent:function(o,type,fn){
o.attachEvent?o.attachEvent('on'+type,fn):o.addEventListener(type,fn,false);
}
};
window.onload=function(){
var o=document.getElementById("drag");
new Drag(o);
}
</script>
<div id="drag" style=" position:absolute; width:100px;height:100px;border:1px solid #bfbfbf">Drag层</div>