javascript - 轻量级draggable jQuery，拖动屏幕

Question

在线示例:http://jsfiddle.net/5tpPx/问题是，如果将黑色方 block 和鼠标拖离红色方 block 区域，一旦将鼠标移回红色方 block 区域，黑色方 block 就会跟随鼠标移动。如何解决这个问题？就像鼠标移动到红色方 block 区域的一侧然后触发mouseup？

  // jQuery draggable plugin
(function($) {
    $.fn.draggable = function(options) {
        var $handle = this,
            $draggable = this,
            draggable = $draggable[0];
            parent = draggable.parentNode;

        options = $.extend({}, {
            handle: null,
            cursor: 'move'
        }, options);

        if( options.handle ) {
            $handle = $(options.handle);
        }

        $handle
            .css('cursor', options.cursor)
            .on("mousedown", function(e) {
                var p_dims = parent.getBoundingClientRect(),
                    d_dims = draggable.getBoundingClientRect(),
                    w = p_dims.width-d_dims.width,
                    h = p_dims.height-d_dims.height;

                var x = d_dims.left - e.pageX,
                    y = d_dims.top - e.pageY,
                    z = $draggable.css('z-index');

                $draggable.css('z-index', 100000);

                $(document.documentElement)
                    .on('mousemove.draggable', function(e) {
                        var l = x+e.pageX-p_dims.left,
                            t = y+e.pageY-p_dims.top;
                        if (l < 0) l = 0;
                        else if (l > w) l = w;
                        if (t < 0) t = 0;
                        else if (t > h) t = h;
                        console.log(l, t);
                        $draggable.offset({
                            left: l+p_dims.left,
                            top: t+p_dims.top
                        });
                    })
                    .one('mouseup', function() {
                        $(this).off('mousemove.draggable');
                        $draggable.css('z-index', z);
                    });

                // disable selection
                e.preventDefault();
            });
    };
})(jQuery);

$('.drag').draggable();

Answer 1

我已更新您的代码 http://jsfiddle.net/5tpPx/3/

在离开父容器时添加了一个类dragoff，并仅在再次触发 mousedown 事件时将其删除。

在设置其坐标之前还检查 handle 是否具有类拖动。

// jQuery draggable plugin
(function($) {
    $.fn.draggable = function(options) {
        var $handle = this,
            $draggable = this,
            draggable = $draggable[0];
            parent = draggable.parentNode;

        options = $.extend({}, {
            handle: null,
            cursor: 'move'
        }, options);

        if( options.handle ) {
            $handle = $(options.handle);
        }


        $handle
            .css('cursor', options.cursor)
            .on("mousedown", function(e) {
                $handle.removeClass('dragoff')
                var p_dims = parent.getBoundingClientRect(),
                    d_dims = draggable.getBoundingClientRect(),
                    w = p_dims.width-d_dims.width,
                    h = p_dims.height-d_dims.height;

                var x = d_dims.left - e.pageX,
                    y = d_dims.top - e.pageY,
                    z = $draggable.css('z-index');

                $draggable.css('z-index', 100000);

                $(document.documentElement)
                    .on('mousemove.draggable', function(e) {
                        if($handle.hasClass('dragoff')){
                            e.preventDefault();
                            return false;
                        }
                        var l = x+e.pageX-p_dims.left,
                            t = y+e.pageY-p_dims.top;
                        if (l < 0) l = 0;
                        else if (l > w) l = w;
                        if (t < 0) t = 0;
                        else if (t > h) t = h;
                        console.log(l, t);
                        $draggable.offset({
                            left: l+p_dims.left,
                            top: t+p_dims.top
                        });
                    })
                    .one('mouseup', function() {
                        $(this).off('mousemove.draggable');
                        $draggable.css('z-index', z);
                    });

                // disable selection
                e.preventDefault();
            });
        $handle.parent().hover(function(){

        },function(){
            $handle.addClass('dragoff')
        })
    };
})(jQuery);

$('.drag').draggable();