JavaScript事件模拟元素拖动

一、前言:

最近要实现一个元素拖放效果,鼠标拖动元素并且定位元素,首先想到的是HTML5中的拖放,在HTML5中,有一个draggable属性,且有dragstart, dragover, drop等事件,主要是通过event.dataTransfer对象方法,在dragstart事件中设置数据event.dataTransfer.setData(); 在drop事件中获取数据event.dataTransfer.getData();但是它并不能实现元素的实时拖放效果,因此还是需要用鼠标事件来模拟元素的拖放。

 

二、实例示图 

 

 

三、实现原理:

1、思路:鼠标依次触发mousedown, mousemove, mouseup事件,在mousemove事件中实时计算元素新位置并且定位元素,

在mouseup事件中注销mousemove,mouseup事件。

 

2、重点:如果所有事件都绑定在拖动元素上,当鼠标移动速度很快,以至于离开了拖动的元素,那么就不会执行mousemove,

mouseup事件处理程序,因此要想让mousemove,mouseup事件处理实时执行,必须将它们绑定到document元素上;

 

四、插件源码:

复制代码
$.fn.extend({
    /**
     * 
     * 扩展jQuery原型,实现鼠标事件模拟元素拖动
     * drag中的回调函数this指向被拖动元素
     * @ method: drag
     * @ use: $( selector ).drag( dragStart, dragMove, dragEnd )
     * @ param { function } 第一个参数,准备拖动处理函数
     * @ param { function } 第二个参数,拖动中处理函数
     * @ param { function } 第三个参数,拖动结束处理函数 
     * @ reutrn { jQuery( selector ) }
     *
     */
    drag: function( dragStart, dragMove, dragEnd ) {
        function drag( dragElem, event ) {
            var offsetX, offsetY, beforePageX, beforePageY;

            if ( $.isFunction(dragStart) ) {
                dragStart.apply(dragElem, arguments);
            }

            // 移动前或移动中的元素位置
            offsetX = parseInt( $(dragElem).css('left'), 10 );
            offsetY = parseInt( $(dragElem).css('top'), 10 );

            // 移动前或移动中的鼠标位置
            beforePageX = event.clientX;
            beforePageY = event.clientY;

            if ( document.addEventListener ) {
                document.addEventListener('mousemove', moveHandle, false);
                document.addEventListener('mouseup', upHandle, false);
            }
            else if ( document.attachEvent ) {
                dragElem.setCapture(); // 将dragElem鼠标事件继承到文档进行捕获
                dragElem.attachEvent('onmousemove', moveHandle);
                dragElem.attachEvent('onmouseup', upHandle);
                dragElem.attachEvent('onlosecapture', upHandle);
            }

            // 鼠标移动事件处理
            function moveHandle (event) {
                var event = event || window.event;

                // 更新移动中或移动终止后的元素位置
                var x = offsetX + event.clientX - beforePageX;
                var y = offsetY + event.clientY - beforePageY;

                $(dragElem).css({
                    left: x + 'px',
                    top: y + 'px'
                });

                // 阻止事件传播
                if ( event.stopPropagation ){
                    event.stopPropagation();
                }
                else if ( event.cancleBubble ) {
                    event.cancleBubble = true;
                }

                if ( $.isFunction(dragMove) ) {
                    dragMove.apply(dragElem, arguments);
                }
            }

            // 鼠标弹起事件处理
            function upHandle (event) {
                if ( document.addEventListener ) {
                    document.removeEventListener('mousemove', moveHandle, false);
                    document.removeEventListener('mouseup', upHandle, false);
                }
                else if ( document.detachEvent ) {
                    dragElem.detachEvent('onlosecapture', upHandle);                
                    dragElem.detachEvent('onmouseup', upHandle);
                    dragElem.detachEvent('onmousemove', moveHandle);
                    dragElem.releaseCapture();
                }
                if ( event.stopPropagation ){
                    event.stopPropagation();
                }
                else if ( event.cancleBubble ) {
                    event.cancleBubble = true;
                }

                if ( $.isFunction(dragEnd) ) {
                    dragEnd.apply(dragElem, arguments);
                }
            }
        }
        $(this).each(function(){
            $(this).bind('mousedown', function(e){
                var dragElem = this,
                    event = e;
                drag(dragElem, event);
            });
        });
        return this;
    }
});
复制代码

 

五、调用实例:

复制代码
(function(){
    var dragEnd = false;
    $('.drag-elem').drag(
        function(){
            $(this).text('准备拖动').css({ zIndex: 2 }).siblings().css({ zIndex: 1 });
        },
        function(){
            var offset = $(this).offset();
            dragEnd = true;
            $(this).text('拖动中(' +  offset.left + ',' + offset.top + ')' );
        },
        function(){
            if (dragEnd) {
                $(this).text('拖动结束');
                dragEnd = false;
            }
        }
    );
}());
复制代码

 

六、完整实例代码

复制代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery drag</title>
<script src="http://code.jquery.com/jquery-1.10.1.js"></script>
<style>
.drag-elem {
    position: absolute;
    left: 10px;
    top: 20px;
    z-index: 999;
    width: 200px;
    height: 50px;
    cursor: move;
    background-color: #ccc;
    border: 5px solid green;
    font-size: 24px;
    line-height: 50px;
    text-align: center;    
}
</style>
</head>

<body>

<div class="drag-elem"></div>

<script>
$.fn.extend({
    /**
     * 
     * 扩展jQuery原型,实现鼠标事件模拟元素拖动
     * drag中的回调函数this指向被拖动元素
     * @ method: drag
     * @ use: $( selector ).drag( dragStart, dragMove, dragEnd )
     * @ param { function } 第一个参数,准备拖动处理函数
     * @ param { function } 第二个参数,拖动中处理函数
     * @ param { function } 第三个参数,拖动结束处理函数 
     * @ reutrn { jQuery( selector ) }
     *
     */
    drag: function( dragStart, dragMove, dragEnd ) {
        function drag( dragElem, event ) {
            var offsetX, offsetY, beforePageX, beforePageY;

            if ( $.isFunction(dragStart) ) {
                dragStart.apply(dragElem, arguments);
            }

            // 移动前或移动中的元素位置
            offsetX = parseInt( $(dragElem).css('left'), 10 );
            offsetY = parseInt( $(dragElem).css('top'), 10 );

            // 移动前或移动中的鼠标位置
            beforePageX = event.clientX;
            beforePageY = event.clientY;

            if ( document.addEventListener ) {
                document.addEventListener('mousemove', moveHandle, false);
                document.addEventListener('mouseup', upHandle, false);
            }
            else if ( document.attachEvent ) {
                dragElem.setCapture(); // 将dragElem鼠标事件继承到文档进行捕获
                dragElem.attachEvent('onmousemove', moveHandle);
                dragElem.attachEvent('onmouseup', upHandle);
                dragElem.attachEvent('onlosecapture', upHandle);
            }

            // 鼠标移动事件处理
            function moveHandle (event) {
                var event = event || window.event;

                // 更新移动中或移动终止后的元素位置
                var x = offsetX + event.clientX - beforePageX;
                var y = offsetY + event.clientY - beforePageY;

                $(dragElem).css({
                    left: x + 'px',
                    top: y + 'px'
                });

                // 阻止事件传播
                if ( event.stopPropagation ){
                    event.stopPropagation();
                }
                else if ( event.cancleBubble ) {
                    event.cancleBubble = true;
                }

                if ( $.isFunction(dragMove) ) {
                    dragMove.apply(dragElem, arguments);
                }
            }

            // 鼠标弹起事件处理
            function upHandle (event) {
                if ( document.addEventListener ) {
                    document.removeEventListener('mousemove', moveHandle, false);
                    document.removeEventListener('mouseup', upHandle, false);
                }
                else if ( document.detachEvent ) {
                    dragElem.detachEvent('onlosecapture', upHandle);                
                    dragElem.detachEvent('onmouseup', upHandle);
                    dragElem.detachEvent('onmousemove', moveHandle);
                    dragElem.releaseCapture();
                }
                if ( event.stopPropagation ){
                    event.stopPropagation();
                }
                else if ( event.cancleBubble ) {
                    event.cancleBubble = true;
                }

                if ( $.isFunction(dragEnd) ) {
                    dragEnd.apply(dragElem, arguments);
                }
            }
        }
        $(this).each(function(){
            $(this).bind('mousedown', function(e){
                var dragElem = this,
                    event = e;
                drag(dragElem, event);
            });
        });
        return this;
    }
});
</script>


<script>
(function(){
    var dragEnd = false;
    $('.drag-elem').drag(
        function(){
            $(this).text('准备拖动').css({ zIndex: 2 }).siblings().css({ zIndex: 1 });
        },
        function(){
            var offset = $(this).offset();
            dragEnd = true;
            $(this).text('拖动中(' +  offset.left + ',' + offset.top + ')' );
        },
        function(){
            if (dragEnd) {
                $(this).text('拖动结束');
                dragEnd = false;
            }
        }
    );
}());
</script>
</body>
</html>
复制代码

 

源码更新 2014/02/19

复制代码
$.fn.extend({
    /**
     * 
     * 扩展jQuery原型,实现鼠标事件模拟元素拖动
     * drag中的回调函数this指向被拖动元素
     * @ method: drag
     * @ use: $( selector ).drag( dragStartFn, dragMoveFn, dragEndFn )
     * @ param { function } 第一个参数,准备拖动处理函数
     * @ param { function } 第二个参数,拖动中处理函数
     * @ param { function } 第三个参数,拖动结束处理函数 
     * @ reutrn { jQuery( selector ) }
     *
     */
    drag: function( dragStartFn, dragMoveFn, dragEndFn ) {
        function drag( target, e ) {
            var offsetX, offsetY, beforePageX, beforePageY;

            if ( $.isFunction(dragStartFn) ) {
                dragStartFn.apply(target, arguments);
            }

            // 移动前或移动中的元素位置
            offsetX = parseInt( $(target).css('left'), 10 ) || 0;
            offsetY = parseInt( $(target).css('top'), 10 ) || 0;

            // 移动前或移动中的鼠标位置
            beforePageX = e.clientX;
            beforePageY = e.clientY;

            $(document).bind('mousemove', moveHandle)
                        .bind('mouseup', upHandle);

            // 鼠标移动事件处理
            function moveHandle (e) {
                // 更新移动中或移动终止后的元素位置
                var x = offsetX + e.clientX - beforePageX;
                var y = offsetY + e.clientY - beforePageY;

                $(target).css({
                    left: x + 'px',
                    top: y + 'px'
                });
                if ( $.isFunction(dragMoveFn) ) {
                    dragMoveFn.apply(target, arguments);
                }
                // 阻止浏览器默认行为(鼠标在拖动图片一小段距离,会出现一个禁止的小提示,即:图片不能再拖动)
                e.preventDefault();
            }

            // 鼠标弹起事件处理
            function upHandle (e) {
                $(document).unbind('mousemove', moveHandle)
                        .unbind('mouseup', upHandle);
                if ( $.isFunction(dragEndFn) ) {
                    dragEndFn.apply(target, arguments);
                }
            }
        }
        $(this).each(function(){
            $(this).bind('mousedown', function(e){
                drag(this, e);
            });
        });
        return this;
    }
});

// 调用实例
(function(){
    var dragEnd = false;
    $('div').drag(
        function(){
            $(this).html('<span>准备拖动</span>').css({ zIndex: 2 }).siblings().css({ zIndex: 1 });
        },
        function(){
            var offset = $(this).offset();
            $(this).html('<span>拖动中(' +  offset.left + ',' + offset.top + ')</span>' );
        },
        function(){
            $(this).html('<span>拖动结束</span>')
        }
    );
    $('img').drag();
}());
复制代码
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值