点击拖动的逻辑-JavaSript-爱易网页

点击拖动的逻辑

日期：2014-05-16　浏览次数：20463 次

求一个点击拖动的逻辑

HTML code


<div id="move" style="position:fixed; bottom:0; left:0"><img src="http://c.csdn.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));

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

点击拖动的逻辑

相关资料更多>

推荐阅读更多>