javascript 拖拽

quasiceo 2014-12-12

展开全文

1.之前写放大镜的时候其实也有用过，但现在发现自己写得不对，因为我是让鼠标始终保持在物体正中心位置的因此要考虑被拖拽物体的宽和高，这不适合拖拽排版2.正确的拖拽方法不应该要考虑被拖拽物体的宽度的，思路是：
(1)鼠标按下，记下此时鼠标的位置orgx,orgy，记下此时鼠标和物体的间距deltaX,deltaY
(2)鼠标在mousemove 的时候记下此时鼠标的nowx,nowy
(3)被拖拽物体position:absolute, 所以此时物体位置应该是：鼠标当前位置X — (1)中算出的间距deltaX同理对应Y （因为position:absolute 它的位置是相对于窗体的，鼠标也是相对于窗体的）但有一点要注意：

使用说明：
absolute：是相对浏览器原点或父节点进行定位的（如果父节点有position按父节点定位）；
relative：是相对与自身所在位置做偏移量调整的

（1）父级没 position 属性,按浏览器定位
（2）父级有 position 属性，父级的“坐标原始点”为原始点

ps.(1) 要注意使用mousemove 方法而不是mouseover方法： mouseover:当鼠标移动到对象时产生，只产生一次 mousemove方法：鼠标进入对象后，不断移动不断产生
(2)可以自行了解一下offsetLeft,offsetTop 返回元素左上角的顶点，相对于offsetParent的偏移量
(3)DOM中.style.left 或.style.top 是不能操作css表的，只能操作内嵌式的style !
(4)要注意什么时候有单位px 什么时候没有单位px! 如果有px要先parseInt()转为整型！
(5)要有面向对象的思想~~~~终于用到了这样写的代码有美感哈哈哈哈哈

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>javascript拖拽</title>
<meta name="" content="">
<script src="http://static./js/jQuery/library/jquery-1.10.2.min.js" type="text/javascript"></script>
<style>
body{ padding:4px; margin:0px; }
.span{
width:30%;
height:200px;
border:1px solid #ccc;
box-shadow:3px 3px 3px #292728;
background-color:white;
position:absolute;
}
.title{
width:100%;
background-color:#a0ccf8;
height:30px;
}
</style>
</head>
<script>
var mouseX;
var mouseY;
var originmouseX;
var originmouseY;
var ispress = false;
$(window).load(
function(){
$("div.span").mousedown(
function(e){
$(this).css("cursor","move");
Drag.mouseDown(e,$(this).get(0));
$(document).mousemove(function(e){console.log("over");Drag.mouseMove(e,$("div.span").get(0));console.log("over");});
}
);
$(document).mouseup(
function(){
$(document).unbind("mousemove");//这里一定要注意不能忘记
console.log("up");
});
}
);
var Drag = {
"orgmouseX":0,
"orgmouseY":0,
"nowmouseX":0,
"nowmouseY":0,
"deltaX":0,
"detaY":0,
"getmousePosition":function(e){
var e = e||window.event;
var mouseX = e.clientX+document.body.scrollLeft-document.body.clientLeft;
var mouseY = e.clientY+document.body.scrollTop-document.body.clientTop;
this.nowmouseX=mouseX;
this.nowmouseY=mouseY;
},//获得鼠标的位置
"mouseDown":function(e,obj){
var e = e||window.event;
this.orgmouseX = e.clientX+document.body.scrollLeft-document.body.clientLeft;
this.orgmouseY = e.clientY+document.body.scrollTop-document.body.clientTop;
this.deltaX = this.orgmouseX - parseInt(obj.style.left);
this.deltaY = this.orgmouseY - parseInt(obj.style.top);
},//鼠标按下时的原始坐标
"mouseMove":function(e,obj){
var e = e||window.event;
this.getmousePosition(e);
var x =parseInt(this.nowmouseX)-parseInt(this.deltaX);
var y =parseInt(this.nowmouseY)-parseInt(this.deltaY);
obj.style.left = x+"px";
obj.style.top = y+"px";
}//鼠标移动事件
}
</script>
<body style="background-color: gray">
<div class="span" id="1" style="top:10px;left:10px">
<div class="title">demo1</div>
</div>
</body>
</html>