How to detect mousemove event over iframe element (Solution)

Example for article at https://www.gyrocode.com/articles/how-to-detect-mousemove-event-over-iframe-element/

by gyrocode

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<h3><a target="_blank" href="https://www.gyrocode.com/articles/how-to-detect-mousemove-event-over-iframe-element/">How to detect <code>mousemove</code> event over <code>iframe</code> element</a> <small>(Solution)</small></h3>

<div id="draggable" class="ui-widget-content">
  <div>Drag me around</div>
  <iframe width="150" height="130" frameBorder="0" src="https://jsfiddle.net/gyrocode/45wtu6wg/show"></iframe>
</div>

<hr><a href="https://www.gyrocode.com/articles/" target="_blank">See more articles</a> on <a href="https://www.gyrocode.com/articles/" target="_blank">Gyrocode.com</a>

CSS

#draggable { width: 150px; height: 150px; padding: 10px; }

JavaScript

$(document).on('ready', function(){
   $('#draggable').draggable({
      start: function(){
         // Temporarily disable mouse events for IFRAME for smooth dragging
         $('#draggable iframe').css('pointer-events', 'none');
      },
      stop: function(){
         // Re-enable mouse events for IFRAME
         $('#draggable iframe').css('pointer-events', 'auto');
      }      
   });
});