求一个点击拖动的逻辑


<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来定义的但是我有一个地方卡住了就是点击拖动那个事件该怎么实现？求例子，求大神赐教！

解决方案 »

  1.   

    mousedown——开始拖动(设置mousemove触发的方法)
    mouseup——释放(移除mousemove触发的方法)
      

  2.   


    mousedown 触发的时候设置mousemove事件，但拖动的时候mousemove事件并没有触发，反而mouseup事件后mousemove却继续执行了。怎么移除mousemove事件？求一个简单例子参考
      

  3.   


    <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";
    }
      };
    };
      

  4.   


    <!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>
      

  5.   

    对象本身的mousedown和docuemnt的mouseup,点击之后到松开之前就应该是被拖动的过程
    所以在：
    全局变量一个：记录当前对象是否应该被拖动,默认是false：isDrag=!1;
    1：对象本身的mousedown事件中绑定一个初始化的事件，设置:isDrag=!0;
    2：根据isDrag的值来处理拖动事件
    3：在document的mouseup时，这时候对象已经不应该被拖动了，所以，重置isDrag=!1<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>
      

  6.   

    c# 倒是会。。javascript不知道怎么弄，看看高手解答。。