How can I click and drag to change the width of an object with jQuery?

advertisements

I have an object that I want to change the width of when you click on it and drag right or left. Adding to the width or taking away from it as you move the mouse (or finger).

<style>
    #changeMe {width:300px; height: 200px;}
</style>

<div id="changeMe">
    Some Content
</div>

<script>
    $('#changeMe').mousedown(function(){
        //Some Code?????
    });

</script>


What you want to do is track the x co-ords of the mouse. If greater than they were before, increase size, if lower, decrease the size.

Not tested but the below should be inspiration.

var oldXPos = 0;
var isDragging = false;

$(document).mousemove(function(event) {
    if (isDragging)
    {
        var difference = event.pageX - oldXPos;
        // Do something with this value, will be an int related to how much it's moved
        // ie $('#changeMe').css.width += difference;
    }
    oldXPos = event.pageX;
});

$('#changeMe').mousedown(function() {
    isDragging = true;
})
$('#changeMe').mouseup(function() {
    isDragging = false;
})