javascript——拖拽原理小实例

#div1{ width: 100px; height: 100px; background: green; position: absolute;}

<div id="div1"></div>

/*
        onmousedown : 选择元素
        onmousemove : 移动元素
        onmouseup     : 释放元素
    */
    window.onload = function(){

        var oDiv = document.getElementById(‘div1‘);

        //鼠标按下时
        oDiv.onmousedown = function(ev){

            var ev = ev || event;

            // 获取鼠标点击时的距离位置
            var disX = ev.clientX - this.offsetLeft;
            var disY = ev.clientY - this.offsetTop ;

            //鼠标移动时
            document.onmousemove = function(ev){

                var ev = ev || event;

                oDiv.style.left = ev.clientX - disX + ‘px‘;
                oDiv.style.top = ev.clientY - disY + ‘px‘;
            };
            //鼠标释放时
            document.onmouseup = function(){
                document.onmousemove = document.onmouseup = null;
            }
        };

    };