Drawing rectangles (divs) with the mouse

Question

I am trying to draw rectangles (divs) using mouse events. Here is my code:

http://jsbin.com/apediti/2/edit

Basically I'm doing the following:

1. On mousedown I save the mouse coordinates, create a new div with size: width=0, height=0, and bind event handlers for mousemove and mouseup.

2. On mousemove I resize the div based on the current mouse position.

3. On mouseup I unbind the event handlers for mousemove and mouseup.

It seems to work good in Firefox, and even IE 10, but in Chrome sometimes the mousemove event fires only 2 or 3 times, after mousedown, so the drawn div doesn't get resized.

I can't find the reason why. Any help is appreciated.

Answer 1

This is happening because Chrome is attempting to select the hovered-over rect element on drag. To fix this, simply prevent the rect element from being selected by setting the user-select CSS property to none (this is vendor prefixed and will not work on IE9 or lower):

.rect {
    position: absolute;
    border: 2px solid rgba(199, 25, 9, 0.64);
    -webkit-user-select: none;  /* Chrome, Safari, Opera */
    -moz-user-select: none; /* Firefox all */
    -ms-user-select: none; /* IE 10+ */
    user-select: none;  
}

Modified JSBin.