JSFiddle - React, Tailwind, and code Playground

by jscheel

HTML

<h1>Mouse Event Test</h1>
<ol>
    <li>Click the gray box and hold the mouse button down (log should show "mousedown")</li>
    <li>Keep button down and move mouse (log should show "mousemove x y")</li>
    <li>Let go of mouse button (log should show mouseup)</li>
</ol>
<hr/>
<label>Log: </label><input type="text" class="console" size="30" />
<hr/>
<iframe width="200" height="200"></iframe>
<hr />
<h1>Notes</h1>
<p>The iframe is covered by a div, like the iframeFix in jquery ui, to prevent the iframe from capturing mouse events. The js is written in a way that is very similar to the way jqueryui handles mouse events.</p>
<p>In chrome, the mousemove event is fired when dragging, even when the drag starts in the gray square in the iframe. In firefox, the mousedown happens, but the mousemove is not fired until you let go of the mouse button.</p>

CSS

p {margin-bottom: 1em;}
iframe {display: block;}

/*! normalize.css v2.1.3 | MIT License | git.io/normalize */

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined in IE 8/9.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}

/**
 * Correct `inline-block` display not defined in IE 8/9.
 */

audio,
canvas,
video {
    display: inline-block;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9.
 * Hide the `template` element in IE, Safari, and Firefox < 22.
 */

[hidden],
template {
    display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
    font-family: sans-serif; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
    margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
    background: transparent;
}

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
    outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
}

/*...

JavaScript

$(document).ready(function(){
  $('div').html('ready');
  $('<div></div>')
    .css({width: 100, height: 100, background: '#ccc'})
    .appendTo($($('iframe')[0].contentWindow.document).find('body'))
    .on('mousedown', function(event){
      $(document).trigger('mousedown');
      return false;
    });
  $(document).on('mousedown', function(event){
    console.log('mousedown');
    $('iframe').each(function(){
      $('<div class="iframefix" style="background: #ff0000;"></div>')
			.css({
				width: this.offsetWidth+"px", height: this.offsetHeight+"px",
				position: "absolute", opacity: "0.5", zIndex: 1000
			})
			.css($(this).offset())
			.appendTo('body');
      $(document).on('mouseup', function(event){
        console.log('mouseup');
        $(document).off('mouseup mousemove');
        $('.iframefix').remove();
      });
      $(document).on('mousemove', function(event){
        console.log('mousemove', event.pageX, event.pageY);
      });
    });
  });
  $(document).on('click', function(event){
    event.stopImmediatePropagation();
	  return false;
  });
});
  


var originalConsoleLog = console.log;
console.log = function() {
  $('.console').val(Array.prototype.join.call(arguments, ' '));
  originalConsoleLog.apply(this, arguments);
};