轻巧的可拖动jQuery，拖动屏幕

Question

在线示例： http : //jsfiddle.net/5tpPx/问题是，如果将黑色方块和鼠标拖离红色方块区域，则一旦将鼠标移回红色方块区域，黑色方块就会跟随鼠标的移动。 如何解决？ 就像一旦鼠标位于红色正方形区域的一侧，然后触发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事件时才将其删除。

在设置其坐标之前还检查了句柄是否具有类拖拽。

// 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();

Answer 2

显然，此脚本中有一个错字。 它说：

.one('mouseup', function() {
                        $(this).off('mousemove.draggable');
                        $draggable.css('z-index', z);
                    });

但应为：

.on('mouseup', function() {
                        $(this).off('mousemove.draggable');
                        $draggable.css('z-index', z);
                    });