Как перетащить 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

Что-то вроде этого приблизит вас к тому, что вы хотите: http://jsfiddle.net/RSYTq/18/

Не совсем справляется с движением вверх и влево, а затем переключается на движение вниз и вправо совсем вправо, но этодает вам идею.

Answer 3

Нет такой вещи, как отрицательная ширина - они не совпадают. Вам необходимо изменить положение и пересчитать угловые позиции относительно угла, который не перемещается.

Answer 4

Вам нужно будет где-то отследить исходную начальную точку (переменные, атрибуты данных на #currentHighlight, где вы хотите) и проверить ширину или высоту <0. Когда это так, установите <code>#currentHighlight left / top CSS должен быть смещен на original + (e.pageX - $currentHighlight.position().left) (например). Затем установите ширину / высоту #currentHighlight равной разнице (но положительной: (e.pageX - $currentHighlight.position().left) * -1).

Answer 5

Похоже, вам нужно проверить, является ли источник щелчка (x, y)> текущей позицией мыши, а затем поменять местами тот, который вы используете для верхнего левого угла CSS.