1

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.

Tamás Pap
  • 17,777
  • 15
  • 70
  • 102
  • Works for me in latest Chrome - do you see any errors in the console? – tckmn Oct 08 '13 at 22:10
  • No errors in the console, and the 'bug' only appears sometimes. Try this for example: draw a rectangle, and when you draw a second one make sure to release the mouse when you are over the first div. Now try to create a 3th rectangle. The bug should appear. Does it? (Thanks) – Tamás Pap Oct 08 '13 at 22:14

1 Answers1

3

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.

James Donnelly
  • 126,410
  • 34
  • 208
  • 218
  • Yeah, that makes sense. It works fine now. Big thanks for that. I would love to find a javascript solution for this, to make it cross browser compatible. Any ideas for a javascript solution? – Tamás Pap Oct 08 '13 at 22:30
  • @TamasPap as you're using jQuery, SLaks' answer here should do the trick: http://stackoverflow.com/questions/2700000/how-to-disable-text-selection-using-jquery – James Donnelly Oct 08 '13 at 22:34
  • Thanks James. Now it works as expected. Appreciated your help! – Tamás Pap Oct 08 '13 at 22:37