javascript - 父宽度和高度区域中的轻量级可拖动锁

Question

发现了一个lightway可拖动的功能。如何锁定父区域中的可拖动黑色 block ？我需要设置宽度和高度来限制黑色 block 区域吗？

在线样本http://jsfiddle.net/zqYZG/

.drag {
  width: 100px;
  height: 100px;
  background-color: #000;
}
.box{
  width: 500px;
  height: 400px;
  background-color:red;
}

jQuery

(function($) {
    $.fn.draggable = function(options) {
        var $handle = this,
            $draggable = this;

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

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

        $handle
            .css('cursor', options.cursor)
            .on("mousedown", function(e) {
                var x = $draggable.offset().left - e.pageX,
                    y = $draggable.offset().top - e.pageY,a
                    z = $draggable.css('z-index');

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

                $(document.documentElement)
                    .on('mousemove.draggable', function(e) {
                        $draggable.offset({
                            left: x + e.pageX,
                             top: y + e.pageY
                        });
                    })
                    .one('mouseup', function() {
                        $(this).off('mousemove.draggable');
                        $draggable.css('z-index', z);
                    });

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

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

Answer 1

这里有一个简单的方法，使用 getBoundingClientRect() 函数:updated JSFiddle

这只是将原始代码中的 l 和 t 变量限制在父节点的维度内。