JS生成可拖动层的问题，不会也帮顶一下，非常感谢

点鼠标mousedown的时候生成一个层（id:dragDiv），这里的实现不管该层dragDiv只是之前隐藏，还是重新生成都行，
此时，当我们还没mouseup的时候，也就是鼠标还是处于按住状态（注意：自始至终鼠标只点击过一次，并长按），之后，我们拖动鼠标，我想实现dragDiv这个层随鼠标拖动，不知道我描述的清不清晰，描述不清楚的话，大家只管提出来，麻烦大家给些建议，最好可以给些测试的代码，不管怎样非常感谢！

解决方案 »

  1.   

    你说div层随鼠标拖动，那当鼠标mouseup的时候呢？div层是自动消失，还是显示在当前鼠标的位置，还是显示在最初生成的位置呢？
      

  2.   


    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <style type="text/css">
            #myMessageDiv
            {
                position:absolute;
                left:100px;
                top:100px;
                width: 500px;
                height: 400px;
                border: 2px solid #C0C0C0;
                background-image: url(http://www.yindaoxian.com/uploads/allimg/090720/150451M45-7.jpg);
    cursor:pointer;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="myMessageDiv">
        </div>
        </form>
    </body>
    </html>
    <script type="text/javascript">
        var moving = 0;
        var _x, _y;
        $("#myMessageDiv").mousedown(function (event) {
            //debugger;
            this.setCapture();
            moving = 1; //开始移动标识
            _x = event.clientX;
            _y = event.clientY;
        });
        $("#myMessageDiv").mouseup(function () {
            this.releaseCapture();
            moving = 0;
        });
        $("#myMessageDiv").mousemove(function (event) {
            if (moving == 1) {
                var x = event.clientX;
                var y = event.clientY;
                //为窗体赋新位置
                var X0 = parseInt($("#myMessageDiv").css("left"));
                var Y0 = parseInt($("#myMessageDiv").css("top"));
                $("#myMessageDiv").css("top", (Y0 + y - _y));
                $("#myMessageDiv").css("left", (X0 + x - _x));
                _x = x;
                _y = y;
            }
        });    
    </script>
      

  3.   


    因为mouseup的时候后续还有功能要加上，要做一些判断，之后div层会消失，至于再次显示的问题，可以在div层还没show出来之前，把绝对定位中的top和left设置到鼠标那里，第一次显示的时候也可以这样，看起来风格也统一
      

  4.   

    javascript拖拽
      

  5.   


    这位兄台，昨晚我已经看到您打的代码，可能是CSDN后台出了问题，要在结贴页中才能看到，多谢您！
    12楼的效果跟您的差不多
    虽然问题还是没有解决，但是还是谢谢你们
      

  6.   

    刚没事写了一下，拖拽原理很简单，只是要封装好，留好API，这样就可以做出很多效果写这么多，给点分吧，好久没上，都挣不到分了。
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>drag</title>
    </head>
    <body>
    <script type="text/javascript">
    (function(w) {
    var drag = function(op) {
    this.hander = op.hander || null;
    this.target = op.target || op.hander || null;
    this.start = op.start || null;
    this.move = op.move || null;
    this.end = op.end || null;
    this.pos = null;
    this.draging = false;
    if(this.hander) {
    addEvent(this.hander, 'mousedown', bind(this, this.dragStart));
    addEvent(document, 'mousemove', bind(this, this.dragMove));
    addEvent(document, 'mouseup', bind(this, this.dragEnd));
    }
    }
    drag.prototype = {
    dragStart: function(e) {
    this.start && this.start.call(this, e);
    this.pos = [e.pageX - parseInt(this.target.style.left), e.pageY - parseInt(this.target.style.top)];
    this.draging = true;
    e.stop();
    },
    dragMove: function(e) {
    if(this.draging) {
    this.target.style.left = e.pageX - this.pos[0] + 'px';
    this.target.style.top = e.pageY - this.pos[1] + 'px';
    this.move && this.move.call(this, e);
    }
    },
    dragEnd: function(e) {
    this.draging = false;
    this.pos = null;
    this.end && this.end.call(this, e);
    }
    };

    function bind(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);
    }
    }
    function addEvent(dom, type, fn) {
    if(document.addEventListener) {
    dom.addEventListener(type, fn, false);
    } else if(document.attachEvent) {
    dom.attachEvent('on' + type, fn);
    } else {
    dom['on' + type] = fn;
    }
    }
    function removeEvent(dom, type, fn) {
    if(document.removeEventListener) {
    dom.removeEventListener(type, fn, false);
    } else if(document.detachEvent) {
    dom.detachEvent('on' + type, fn);
    } else {
    dom['on' + type] = null;
    }
    }

    w.drag = drag;
    })(window);
    </script>
    <div id="box" style="width:400px;height:200px;background:#f0f;"></div>
    <script type="text/javascript">
    new drag({
    hander: document.getElementById('box'),
    start: function(e) {
    var s = document.getElementById('test');
    if(!s) {
    s = document.createElement('div');
    s.id = 'test';
    s.style.position = 'absolute';
    s.style.width = '200px';
    s.style.height = '200px';
    s.style.backgroundColor = '#f00';
    document.body.appendChild(s);
    this.target = s;
    } else {
    s.style.display = 'block';
    }
    s.style.left = e.pageX + 'px';
    s.style.top = e.pageY + 'px'; 
    },
    end: function(e) {
    this.target.style.display = 'none';
    }
    });
    </script>
    </body>
    </html>
      

  7.   

    感谢大家的支持，再次感谢danica7773（#15楼），高手啊！