js 拖动特效

<script>
//延迟拖动监听
var dragListener = new function() {
        this.mouseX = 0;
        this.mouseY = 0;
        this.callback = null;
        this.listener = function(e)
        {
                this.mouseX = e.clientX;
                this.mouseY = e.clientY;
                addEvent(document, 'mousemove', dragListener.check);
                addEvent(document, 'mouseup',   dragListener.clean);
        };
        this.check = function(e)
        {
                if(Math.abs(e.clientX-dragListener.mouseX) > 3 || Math.abs(e.clientY-dragListener.mouseY) > 3) {
                        //dragListener.clean();
                        if(dragListener.callback) { dragListener.callback(e); }
                }
        };
        this.clean = function()
        {
                removeEvent(document, 'mousemove', dragListener.check);
                removeEvent(document, 'mouseup',   dragListener.clean);
        };

        /**
        * 元素绑定事件
        */
        function addEvent(obj, eventType, callback)
        {
                //Mozilla, Netscape, Firefox
                if(window.addEventListener) {
                        obj.addEventListener(eventType, callback, true);

                //IE
                } else {
                        obj.attachEvent('on'+eventType, callback);
                }
        }

        /**
        * 元素移除事件
        */
        function removeEvent(obj, eventType, callback)
        {
                if(obj.removeEventListener) { obj.removeEventListener(eventType, callback, true); }
                else { obj.detachEvent('on'+eventType, callback); }
        }
};
dragListener.callback = function(e){ document.getElementById('test').innerHTML = e.clientX-dragListener.mouseX; }
</script>
<div id='test' style='display:block;width:300px;height:300px;background:#ea0000;' onmousedown="dragListener.listener(event);"></div>

你可能感兴趣的:(js 拖动特效)