【拖拽】♣一

关于js实现最简单的拖拽
http://www.cnblogs.com/hongru/archive/2010/09/22/1833030.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        *{margin:0;padding:0}
        body{font:12px/1.5 arial}
        div{position:absolute;width:300px;height:200px;border:5px solid #ddd;background:#fff}
        h2{background:#f4f4f4}
    </style>
</head>
<body>
    <div>
        <h2>对话框</h2>
    </div>
    <script>
        var getStyle = function(o, key) {// o object
            // currentStyle only for ie5.0+
            return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o, null)[key];
        };
        var drag = function(bar, target) {
            var params = {
                startLeft: 0,
                startTop: 0,
                _X: 0,
                _Y: 0,
                isDarg: false
            };
            // 刷新页面时,获取所在位置
            if (getStyle(target, 'left') != 'auto') {
                params.startLeft = getStyle(target, 'left');
            }
            if (getStyle(target, 'top') != 'auto') {
                params.startTop = getStyle(target, 'top');
            }
            // 鼠标按下时,获取鼠标位置
            bar.onmousedown = function(e) {
                e = e ? e : window.event;
                params.isDarg = true;
                params._X = e.clientX;
                params._Y = e.clientY;
            };
            // 鼠标移动时,重新设定位置
            document.onmousemove = function(e) {
                var e = e ? e : window.event;
                if (params.isDarg) {
                    var curX = e.clientX,
                        curY = e.clientY,
                        desL = curX - params._X + parseInt(params.startLeft),// parseInt('22px') 返回由字符串转换得到的整数
                        desT = curY - params._Y + parseInt(params.startTop);
                    target.style['left'] = desL >= 0 ? desL + 'px' : 0;
                    target.style['top'] = desT >= 0 ? desT + 'px' : 0;
                }
            };
            // 鼠标释放时,获取所在位置
            document.onmouseup = function() {
                params.isDarg = false;
                if (getStyle(target, 'left') != 'auto') {
                    params.startLeft = getStyle(target, 'left');
                }
                if (getStyle(target, 'top') != 'auto') {
                    params.startTop = getStyle(target, 'top');
                }
            };
        };
        //drag(document.getElementsByTagName('div')[0], document.getElementsByTagName('div')[0]);
        drag(document.getElementsByTagName('h2')[0], document.getElementsByTagName('div')[0]);
    </script>
</body>
</html>
原文地址:https://www.cnblogs.com/jzm17173/p/2713390.html