JSFiddle - React, Tailwind, and code Playground

by Kai_Draord

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head runat="server">
  <title>Test</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <!DOCTYPE html>

  <head runat="server">
    <title>Test</title>
    <script src="jquery-3.2.1.js"></script>
    <script src="jquery-ui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.1.8/jsPlumb.js"></script>
    <style>
      .jsplumb-endpoint {
        z-index: 10;
      }

    </style>
  </head>

  <body>

    <div id="leftDiv">
      <div id="deviceInfo">
        <button id="black">dark</button>
        <button id="white">light</button>
        <ul id="menu">
          <li>Device Name
            <ul id="deviceName">
              <li>
                item 1
              </li>
            </ul>
          </li>
          <li>Interface
            <ul id="interface">
              <li>
                item 2
              </li>
            </ul>
          </li>
          <li>Display
            <ul id="display">
              <li>
                item 3
              </li>
            </ul>
          </li>
          <li>Output
            <ul id="output">
              <li>
                item 4
              </li>
            </ul>
          </li>
        </ul>
        <button id="btn">create</button>
        <input type="button" id="save" name="save" value="save" />
        <input type="button" id="load" name="load" value="load" />
      </div>
      <div id="settingsDiv">

      </div>
    </div>
    <div id="mainDiv">

    </div>

CSS

html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #2c2c2c;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJjMmMyYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM3JSIgc3RvcC1jb2xvcj0iIzNkM2QzZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY2JSIgc3RvcC1jb2xvcj0iIzM1MzUzNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY2JSIgc3RvcC1jb2xvcj0iIzM1MzUzNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMzEzMTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #2c2c2c), color-stop(37%, #3d3d3d), color-stop(66%, #353535), color-stop(66%, #353535), color-stop(100%, #131313));
  background: -webkit-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%);
  background: -o-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%);
  background: -ms-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%);
  background: linear-gradient(to right, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#2c2c2c', endColorstr='#131313', GradientType=1);
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  color: white;
}

#leftDiv {
  display: inline-block;
  width:...

JavaScript

var setZoom = function(z, el, instance) {
  instance = instance || jsPlumb;
  var p = ["-webkit-", "-moz-", "-ms-", "-o-", ""],
    s = "scale(" + z + ")";
  for (var i = 0; i < p.length; i++) {
    //el.css(p[i] + "transform", s);          //FIRST WAY TO TRANSFORM
    el.style.transform = 'scale(' + zX + ')'; //SECOND WAY TO TRANSFORM
  }
  instance.setZoom(z);
};

var content = document.getElementById('mainDiv').getElementsByClassName('foo');
var zX = 1;
$('#mainDiv').bind('mousewheel DOMMouseScroll', function(e) {
  e.preventDefault();
  var dir;
  if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
    dir = 0.05;
  } else {
    dir = -0.05;
  }
  if ((zX + dir) >= 0.05) {
    zX += dir;
  }
  for (var i = 0; i < content.length; i++) {
    content[i].style.transform = 'scale(' + zX + ')';
    setZoom(zX, content[i]);
  }
  return;
});





















































$('#deviceName li').draggable({
  helper: 'clone',
  revert: 'invalid'
});
$('#interface li').draggable({
  helper: 'clone',
  revert: 'invalid'
});
$('#display li').draggable({
  helper: 'clone',
  revert: 'invalid'
});
$('#output li').draggable({
  helper: 'clone',
  revert: 'invalid'
});
$('#streams li').draggable({
  helper: 'clone',
  revert: 'invalid'
});

function foo() {
  $('.foo').each(function() {
    $(this).draggable({
      containment: $(this).parent(),
      stack: '.foo'
    });
  });
}
var fooCount = $('.foo').length;
$('#mainDiv').droppable({
  drop: function(event, ui) {
    if (!ui.draggable.hasClass('foo')) {
      var Class = ui.draggable.attr("class");
      var title = ui.draggable.text().trim();
      var item = $('<table class="foo elementTable ' + Class + '" name="' + title + '" id="' + (fooCount + 1) + '"><tr class="tableHeader"><th class="thClass"><button class="settings">set</button>' + title + '<span class="close">x</span></th></tr><tr><td class="add"><span class="addList">Add new link</span></td></tr></table>');
     ...