JS实现拖动效果

 来源：

 

     在闲暇之余实现了一个简单的JS拖动效果。下面是效果图：

     
 

 实现原理：

       编写鼠标按下（mousedown）、鼠标移动（mousemove）、鼠标释放（mouseup）的事件函数。为将被移动的元素（一般是div）注册mousedown事件，当被移动元素中的mousedown事件触发时为body注册mousemove和mouseup事件。当mouseup事件触发时，移除body的mousemove和mouseup事件。

 

代码如下：

 

 以下是JS代码：

<script type="text/javascript">

    window.onload = function(){
        result = $("result");
        $("center").onmousedown = moveFun;
    };

    /* 处理透明窗口移动 */
    function moveFun(event) {
        var body = document.documentElement,
            evt = event || window.event,
            src = evt.target || evt.srcElement;

        var _sX = 0, _sY = 0;

        if (evt.type === "mousedown" ) {
            body.onmousemove = moveFun;
            body.onmouseup = moveFun;

            window._offset_ = getElementOffset($("item"));
            _offset_ = {
                left : (evt.clientX - _offset_.left),
                top : (evt.clientY - _offset_.top)
            };
        }

        if (evt.type === "mousemove") {
            var target = $("item"),
                _x = evt.clientX,
                _y = evt.clientY;

            target.style.left = (_x - _offset_.left) + "px";
            target.style.top = (_y - _offset_.top) + "px";
        }

        if (evt.type === "mouseup" ) {
            body.onmousemove = null;
            body.onmouseup = null;
        }
    }

    /* 获取obj对象当前相当于窗口最左边和最上边的距离 */
    function getElementOffset(obj){
        var _left = obj.offsetLeft,
            _top = obj.offsetTop,
            parent = obj.offsetParent;

        while (parent != null) {
            _left += parent.offsetLeft;
            _top += parent.offsetTop;

            parent = parent.offsetParent;
        }

        return {
            left : _left,
            top : _top
        };
    }

    /* 返回指定id对象 */
    function $(id) {
        return document.getElementById(id);
    }
</script>

 

HTML代码：

<div class="item" id="item">
    <div class="center" id="center">
        <div class="content">
        人民日报发微博称，很多奶茶店热饮的杯盖上，都有一个三角符号，中间写着数字6。专家表示，最常用的6号塑料材料是聚苯乙烯，遇热可能会“放毒”，喝热饮最好不要带盖喝。这是怎么回事？6号塑料真的有毒吗？来看看本文怎么说吧。
        </div>
    </div>
    <div class="bottom">
        <a href="#" class="last">收藏</a>
        <img src="separator_updown.png">
        <a href="#">定时</a>
        <img src="separator_updown.png">
        <a href="#">发送</a>
    </div>
</div>