如何拖动DIV，使其宽度和高度为负值

我在这里有点困惑。我正在开发一个反馈实用程序，允许用户在网页上"画"方框来突出问题区域。现在我有一个覆盖DIV，它填充了屏幕，jQuery允许您通过单击和拖动绘制红色轮廓的DIV。

这是JS:

{
    var $feedbackOverlay = jQuery('#feedbackOverlay');
    var $original = { top: 0, left:0 };
    $feedbackOverlay.bind('mousedown', function (e)
    {
        jQuery('<div id="currentHighlight"></div>')
            .css('width', '1px')
            .css('height', '1px')
            .css('border', 'solid 3px #ff0000')
            .css('border-radius', '5px')
            .css('position', 'absolute')
            .css('left', e.pageX)
            .css('top', e.pageY)
            .css('z-index', '8000001')
            .appendTo('body');
        $original = { top: e.pageY, left: e.pageX };
    });
    $feedbackOverlay.bind('mousemove', function (e)
    {
        var $currentHighlight = jQuery('#currentHighlight');
        if ($currentHighlight.length > 0)
        {
            var $pos = { top: e.pageY, left: e.pageX };
            if($pos.top < $original.top) $currentHighlight.css('top', $pos.top);
            if ($pos.left < $original.left) $currentHighlight.css('left', $pos.left);
            $currentHighlight.height(Math.abs($pos.top - $original.top));
            $currentHighlight.width(Math.abs($pos.left - $original.left));
        }
    });
    $feedbackOverlay.bind('mouseup', function (e)
    {
        var $currentHighlight = jQuery('#currentHighlight');
        $currentHighlight.removeAttr('id');
    });
    var $feedbackInstructions = jQuery('#feedbackInstructions');
    $feedbackInstructions.fadeIn(1000, function ()
    {
        setTimeout(function ()
        {
            $feedbackInstructions.fadeOut(1000);
        }, 3000);
    });
    $feedbackOverlay.height(jQuery(document).height());
});

以下是上面的jsFiddle：

http://jsfiddle.net/Chevex/RSYTq/

问题是我不能把这些盒子向上或向左拖动。第一次单击会将左上角放在鼠标单击的位置。之后，后续拖动将更改框的宽度。放开鼠标完成框，然后可以开始绘制另一个框。如果在绘制时尝试向左或向上拖动DIV，其宽度将保持为0，但不会变为负数。