Question

I’m using the following code to allow users to resize a DIV element vertically, but when the click and drag the handle, text and other elements on the page get selected as if the user was just clicking and highlighting everything on the page. Is there a way to prevent this from happening as this looks very bad? This is being used with Prototype.js.

function DragCorner(container, handle) {
    var container = $(container);
    var handle = $(handle);

    // Add property to container to store position variables
    container.moveposition = {y:0};

    function moveListener(event) {
        // Calculate how far the mouse moved
        var moved = { y:(container.moveposition.y - event.pointerY()) };
        // Reset container's x/y utility property 
        container.moveposition = {y:event.pointerY()};
        // Update container's size
        var size = container.getDimensions();
        container.setStyle({height: size.height + moved.y + 'px'});
    }

    // Listen for 'mouse down' on handle to start the move listener
    handle.observe('mousedown', function(event) {
        // Set starting x/y 
        container.moveposition = {y:event.pointerY()};
        // Start listening for mouse move on body 
        Event.observe(document.body,'mousemove',moveListener);
    });

    // Listen for 'mouse up' to cancel 'move' listener 
    Event.observe(document.body,'mouseup', function(event) {
        Event.stopObserving(document.body,'mousemove',moveListener);
        console.log('stop listening');
    });
}

Answer 1

Adding the following to the DIV fixed this:

onselectstart="return false;"