DragControls not always hovering off objects

Describe the bug

When using DragControls the hoveroff event doesn’t fire when the pointer moves from one draggable object to another without first moving off the original object. This doesn’t impact the drag functionality but leaves objects without having hoveroff event code executed.

To Reproduce

  • With DragControls enabled hover directly from one draggable object to another.
  • See the live example below.


The fix that works for me is to insert this code at line 107 of DragControls.js but I’m not experienced with javascript or three.js so I happily defer to the experts. I’ve prepared a branch with this fix as per the contribution instructions, please let me know if I should submit the pull request.

      if ( _hovered !== object && _hovered !== null) {

				scope.dispatchEvent( { type: 'hoveroff', object: _hovered } );

				_domElement.style.cursor = 'auto';
				_hovered = null;

Live example

  1. Go to https://did.makerchain.ca/dragcontrols.issue
  2. Click to add a few dividers and move the pointer over the divider intersections
  3. Notice that dividers get left coloured red.
  4. Go to https://did.makerchain.ca/dragcontrols.issue.fixed to see it working with my suggested DragControls.js change

Expected behavior

Objects should always have the hoveroff event fire.


  • Device: Desktop
  • OS: MacOS
  • Browser: Chrome, Firefox
  • Three.js version: r126

1 possible answer(s) on “DragControls not always hovering off objects

  1. Thanks for the quick reply, your fiddle definitely sums up the behavior in a simple way.

    I’ve created the PR after running ‘node utils/modularize.js’.

    Many thanks for your prolific and knowledgeable responses to three.js forum posts. As I have been getting up to speed your responses have helped me immensely.