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

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

Answer 3

这样的事情将使您更接近您想要的东西： http : //jsfiddle.net/RSYTq/18/

还没有完全处理向上和向左移动，然后切换到非常向右下移和向右移动的方法，但是它可以为您提供想法。

Answer 4

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

Answer 5

您需要在某处跟踪原始起点（变量， #currentHighlight上的数据属性，无论您想要的位置），并检查width或height <0。在这种情况下，将#currentHighlight left / top CSS设置为original + (e.pageX - $currentHighlight.position().left) ）。 然后将#currentHighlight宽度/高度设置为相同的差值（但为正数： (e.pageX - $currentHighlight.position().left) * -1 ）。