Javascript dragging selects text and elements around the drag area

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

Following up your earlier question and answer, add a small handle element and make it as the only element that can be selected and draggable. Also I guess you made that div's position as relative and handle position as absolute. Right??

Answer 2

Adding the following to the DIV fixed this:

onselectstart="return false;"