如何拖动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/

Answer 2

没有这样的东西是负宽度 - 这些不是coorindinates。您需要重新定位并重新计算相对于未移动的角的角位置。

Answer 3

这样的东西会让你更接近你想要的东西：http://jsfiddle.net/RSYTq/18/

不完全处理向上移动到左边然后切换到向下移动到右边但是它给了你这个想法。

Answer 4

听起来你需要检查点击原点（x，y）是否>当前鼠标位置，然后交换你用于CSS左上角的那个。

Answer 5

您需要在某处跟踪原始起始点（变量，#currentHighlight上的数据属性，您想要的任何位置），并检查宽度或高度<0。如果是这样，请将#currentHighlight left / top CSS设置为由original + (e.pageX - $currentHighlight.position().left)偏移（例如）。然后将#currentHighlight宽度/高度设置为相同的差异（但是正数：(e.pageX - $currentHighlight.position().left) * -1）。