JSFiddle - React, Tailwind, and code Playground

by Alok Singh

HTML

<script src="js-graph-it.js"></script>
    <script type="text/javascript" src="js-graph-it.js"></script>
    <link rel="stylesheet" type="text/css" href="js-graph-it.css">

       <style>
      .canvas {
        font-family: tahoma;
      }
      .block {
        position: absolute;
        border: 1px solid #7DAB76;
        background-color: #BAFFB0;
        padding: 3px;
      }
      .connector {
        background-color: #FF9900;
      }
      .source-label, .middle-label, .destination-label {
        padding: 5px;
      }
    </style>

  <body onload="initPageObjects();">


        <div class="canvas"
      style="width: 1350px; height: 1250px;">

       <h1 class="block" id="h1_block"
        style="left: 100px; top:10px;">
          h1 block
      </h1>

      <h2 class="block" id="h2_block"
        style="left: 800px; top: 100px;">
        h2 block
      </h2>

      <h3 class="block" id="h3_block"
        style="left: 100px; top: 180px;">
        h3 block
      </h3>

      <h2 class="block" id="h4_block"
        style="left: 100px; top: 480px;">
        h2_new block
      </h2>

  <!--   <div class="connector h1_block h2_block"></div>

        <img src="arrow.gif" class="connector-start">
        <img src="arrow.gif" class="connector-end">

        <label class="source-label">start</label>
        <label class="middle-label">middle</label>
        <label class="destination-label">end</label>

    </div> -->

    <div class="connector h1_block h2_block">
        <!-- <img class="connector-end" src="arrow.gif"> -->
    </div>

    <div class="connector h2_block h3_block">
        <!-- <img class="connector-end" src="arrow.gif"> -->
    </div>

    <div class="connector h2_block h4_block">
        <!-- <img class="connector-end" src="arrow.gif"> -->
    </div>




  </body>
</html>

CSS

.draggable
{
	position: absolute;
	cursor: move;
	z-index: 1;
}

.connector
{
	background-color: black;
}

.dock_point
{
	height: 1px;
	width: 1px;
	overflow: hidden;
	padding: 0px !important;
	border: none !important;
	margin: 0px !important;
	position: absolute;
	font-size: 1px;
	visibility: hidden;
}

JavaScript

/*
 *	Copyright 2014 Luca Zenti
 *
 *	Licensed under the Apache License, Version 2.0 (the "License");
 *	you may not use this file except in compliance with the License.
 *	You may obtain a copy of the License at
 *	
 *	    http://www.apache.org/licenses/LICENSE-2.0
 *	
 *	Unless required by applicable law or agreed to in writing, software
 *	distributed under the License is distributed on an "AS IS" BASIS,
 *	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *	See the License for the specific language governing permissions and
 *	limitations under the License.
 */

/*********************
 * browser detection *
 *********************/

var ie=document.all;
var nn6=document.getElementById&&!document.all;

/****************************************************
 * This class is a scanner for the visitor pattern. *
 ****************************************************/
 
/**
 * Constructor, parameters are:
 * visitor: the visitor implementation, it must be a class with a visit(element) method.
 * scanElementsOnly: a flag telling whether to scan html elements only or all html nodes.
 */
function DocumentScanner(visitor, scanElementsOnly)
{
	this.visitor = visitor;
	this.scanElementsOnly = scanElementsOnly;

	/**
	 * Scans the element
	 */
	this.scan = function(element)
	{
		var i;
		if(this.visitor.visit(element))
		{
			// visit child elements
			var children = element.childNodes;
			for(i = 0; i < children.length; i++)
			{
				if(!this.scanElementsOnly || children[i].nodeType == 1)
				{
					this.scan(children[i]);
				}
			}
		}		
	}	
}

/*****************
 * drag and drop *
 *****************/
 
var isdrag=false;					// this flag indicates that the mouse movement is actually a drag.
var mouseStartX, mouseStartY;		// mouse position when drag starts
var elementStartX, elementStartY;	// element position when drag starts

/**
 * the html element being dragged.
 */
var elementToMove;

/**
 * an array containing the blocks being dragged. This is...