javascript - 如何拖动 DIV 使其宽度和高度为负值？

Question

我在这里有点难过。我正在开发一个反馈实用程序，允许用户在网页上“绘制”框以突出显示问题区域。现在我有一个覆盖整个屏幕的 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，但不会变为负值。

Answer 1

在这里您可以找到有效的解决方案:http://jsfiddle.net/RSYTq/34/