JSFiddle - React, Tailwind, and code Playground

by black strings

HTML

<script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
<button id="showBtn">s</button>
<div id="mainBody">
  
</div>
<div id="console">

</div>
<!-- jquery will move this into the mainwindow at runtime -->
<!-- <canvas id="demoCanvas" width="235" height="240"></canvas> -->

CSS

#mainWindow {border:thin solid white; width:500px; height:250px; padding:5px;}
#sliderWindow {border: thin solid white; width:150px; height:100%; overflow-y:scroll; display:inline-block;}
#sliderWindow .onFocus {background-color:#c6dffa;}

#myCanvasId {border:thin solid #e3e3e3; display:inline-block; margin:5px; align:top;}

.sliderItemClass{border:thin solid grey; width:96%; display:block; color:grey;
/* non selectable */
-webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
}

JavaScript

var mStr ="Sldier Window with JS"

//namespace
var mod = {};

//################# WidgetFactory creates dom widget
mod.WidgetFactory = function(){};
var WidgetFactory = mod.WidgetFactory;
WidgetFactory.createSliderItem = function(parent, type, sliderItemClass, itemTitle){
	var me = parent;
  
	var widget = $(type)
  	.addClass(sliderItemClass)
    .attr('id',itemTitle)	//title used as id
    .append(itemTitle)
    .on('mousedown',function(){
    	me.mouseDown = true;
    })
    .on('mousemove',function(){
    	me.mouseDown = false;	//moving will prevent click action
    })
    .on('mouseup',function(){
    	if(me.mouseDown == true){
    		me.sliderWindowFocusOnMe();
      }
    });
    
  return widget;
}
WidgetFactory.createSliderWindow = function(classObj, idName){
  var me = classObj;
	var widget = $('<div>')
  	.attr('id',idName)
    .mouseleave(function(){
      	me.isDragging = false;
        me.isFocus = false;
    })
    .mouseenter(function(){
    	me.isFocus = true;
    })
    .mousedown(function() {
    	me.isDragging = true;
    })
    .mousemove(function(event) {
      if(me.isDragging && me.isFocus){
      	var newY = $(this).scrollTop();
      	if(prevY < event.pageY){
          $(this).scrollTop(newY-me.dragSpeed);
        }else{
        	$(this).scrollTop(newY+me.dragSpeed);
        }
      }
      //$('#console').html(event.screenX + " : " + event.pageX);
      //record the last coordY
      prevY = event.pageY;
     })
    .mouseup(function() {
    	me.isDragging = false;
    });
    
  return widget;
}

//################# Slider Item
mod.SliderItem = function(parent,sliderItemClass,itemTitle){
	this.init(parent,sliderItemClass,itemTitle);
}
var SliderItem = mod.SliderItem;
SliderItem.prototype.init = function(parent, sliderItemClass,itemTitle){
	var me = this;
  this.parent = parent;
  this.name = itemTitle;
  this.mouseDown = false;
  this.$widget = WidgetFactory.createSliderItem(
  	parent, '<div>',sliderItemClass,itemTitle
 ...