Question

I’m a bit stumped here. I am developing a feedback utility that will allow the user to “draw” boxes on a web page to highlight problem areas. Right now I have an overlay DIV that fills the screen and jQuery allows you to draw red outlined DIVs by clicking and dragging.

Here is the 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());
});

Here is a jsFiddle for the above:

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

The problem is that I can’t drag the boxes up or left. The first click puts the top left corner where the mouse clicked. After that subsequent dragging will change the width of the box. Letting go of the mouse completes the box and you may then start drawing another one. If you try to drag the DIV left or up while drawing it’s width will remain at 0 but won’t go negative.

Answer 1

Here you can find working solution: http://jsfiddle.net/RSYTq/34/