JSFiddle - React, Tailwind, and code Playground

by pkzew

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
<table id="myTable" style="background-color:#828282" cellspacing="1" cellpadding="2">
    <thead>
        <tr style="background-color: #cdcdcd">
            <td style="padding: 0px 10px 0px 10px" rowspan="2">Kategorie</Td>
            <td style="padding: 0px 10px 0px 10px"  rowspan="2">Bar ID</Td>
            <td style="padding: 0px 10px 0px 10px" colspan="2">orginal</Td>
            <td style="padding: 0px 10px 0px 10px" colspan="2">move</Td>
        </tr>
        <tr style="background-color: #cdcdcd">
            <td style="padding: 0px 10px 0px 10px">start time</Td>
            <td style="padding: 0px 10px 0px 10px">end time</Td>
            <td style="padding: 0px 10px 0px 10px">start time</Td>
            <td style="padding: 0px 10px 0px 10px">end time</Td>
        </tr>
    </thead>
</table>



<div id="drag"></div>
<div id="drop"></div>

JavaScript

(function (Highcharts) {

    'use strict';

    var addEvent = Highcharts.addEvent,
        each = Highcharts.each,
        a=1,
        drag_action,
        point,
        pick = Highcharts.pick;

    /**
     * Filter by dragMin and dragMax
     */
    function filterRange(newY, series, XOrY) {
        var options = series.options,
            dragMin = pick(options['dragMin' + XOrY], undefined),
            dragMax = pick(options['dragMax' + XOrY], undefined);

        if (newY < dragMin) {
            newY = dragMin;
        } else if (newY > dragMax) {
            newY = dragMax;
        }
        return newY;
    }


    Highcharts.Chart.prototype.callbacks.push(function (chart) {

        var container = chart.container,
            dragPoint,
            dragX,
            dragY,
            dragPlotX,
            dragPlotY,
            range_width;

        /**
         * Get the new values based on the drag event
         */
        function getNewPos(e) {
           

           // newX = filterRange(newX, series, 'X');
           // newX2 = filterRange(newX2, series, 'X');
           // newY = filterRange(newY, series, 'Y');
           // newX2 =  dragPoint.category + deltaX;
              
          if(drag_action=='links'){
        	  var originalEvent = e.originalEvent || e,
                  pageX 	    = originalEvent.changedTouches ? originalEvent.changedTouches[0].pageX : e.pageX,
                  pageY 	    = originalEvent.changedTouches ? originalEvent.changedTouches[0].pageY : e.pageY,
                  draggableX    = dragPoint.series.options.draggableX,
                  draggableY    = dragPoint.series.options.draggableY,
                  deltaX        = dragX - pageX,
                  deltaY        = dragY - pageY,
                  series        = dragPoint.series,
                  newPlotX      = dragPlotX - deltaX,
                  newPlotY      = dragPlotY - deltaY,  
                  range_width   =  dragPoint.x2-dragPoint.x,
...