Question

Does that title sound confusing? I thought it might well anyways.

When I person clicks on the page I want them to be able to me a little line shorter and long.

You can see what I mean here:

http://jsfiddle.net/shawn31313/HKLhE/9/show/

Do a Mousedown and them move your move to the right. It works fine.
But now, move you mouse to the left. See the problem? It goes the same direction as it did when you dragged to the right. I know this is because i’m using width and obviously width on goes one way.

This is my code so far:

$(document).ready(function() {
    var dragStatus = 0,
        getPos, giveRandomID;
    $(document).mousedown(function(event) {
        dragStatus = 0;
        getPos = {
            top: event.clientY,
            left: event.clientX
        };
        giveRandomID = Math.floor(Math.random() * 99999);
    });
    $(document).mousemove(function() {
        var line = $('#line' + giveRandomID);
        if (dragStatus == 0) {
            $('body').append("<div id='line" + giveRandomID + "' class='line' style='position:absolute;top:" + getPos.top + "px;left:" + getPos.left + "px;background:black;width:2px;height:5px'></div>");
            dragStatus = 1;
        }
        if (dragStatus == 1) {
            if (event.clientX > line.offset().left) {
                line.css({
                    width: event.clientX - line.offset().left
                });
            } else {
                line.css({
                    width: line.offset().left - event.clientX
                });
            }
            //for DEG  "-" Top-Math.abs(DEG*2) for Deg "+" Top+(DEG*2)
        }
    });
    $(document).mouseup(function() {
        dragStatus = 2;
    });
});​

I hope someone can help me out with this. Maybe a complete different way to set this up. Just something to fix this issue

Answer 1

To make the line stretch to the left, you have to update the left property:

        if (event.clientX > getPos.left) {
            line.css({
                left: getPos.left,
                width: event.clientX - getPos.left
            });
        } else {
            line.css({
                left: event.clientX,
                width: getPos.left - event.clientX
            });
        }

jsFiddle: http://jsfiddle.net/HKLhE/16/