// Program starts here. Creates a sample graph in the
// DOM node with the specified ID. This function is invoked
// from the onLoad event handler of the document (see below).
function main() {
  // Checks if browser is supported
  if (!mxClient.isBrowserSupported()) {
    // Displays an error message if the browser is
    // not supported.
    mxUtils.error('Browser is not supported!', 200, false);
  } else {
    // Defines an icon for creating new connections in the connection handler.
    // This will automatically disable the highlighting of the source vertex.
    mxConnectionHandler.prototype.connectImage = new mxImage('images/connector.gif', 16, 16);

    // Creates the div for the toolbar
    var tbContainer = document.createElement('div');
    tbContainer.style.position = 'absolute';
    tbContainer.style.overflow = 'hidden';
    tbContainer.style.padding = '2px';
    tbContainer.style.left = '0px';
    tbContainer.style.top = '0px';
    tbContainer.style.width = '24px';
    tbContainer.style.bottom = '0px';

    document.body.appendChild(tbContainer);

    // Creates new toolbar without event processing
    var toolbar = new mxToolbar(tbContainer);
    toolbar.enabled = false

    // Creates the div for the graph
    var container = document.createElement('div');
    container.style.position = 'absolute';
    container.style.overflow = 'hidden';
    container.style.left = '24px';
    container.style.top = '0px';
    container.style.right = '0px';
    container.style.bottom = '0px';
    container.style.background = 'url("https://jgraph.github.io/mxgraph/javascript/examples/editors/images/grid.gif")';
    //document.getElementById('graph-wrapper').style.background = 'url("editors/images/grid.gif")';

    document.getElementById('graph-wrapper').appendChild(container);

    // Workaround for Internet Explorer ignoring certain styles
    if (mxClient.IS_QUIRKS) {
      document.body.style.overflow = 'hidden';
      new mxDivResizer(tbContainer);
      new mxDivResizer(container);
    }

    // Creates the model and the graph inside the container
    // using the fastest rendering available on the browser
    var model = new mxGraphModel();
    var graph = new mxGraph(container, model);

    // Enables new connections in the graph
    graph.setConnectable(true);
    graph.setMultigraph(false);

    // Stops editing on enter or escape keypress
    var keyHandler = new mxKeyHandler(graph);
    var rubberband = new mxRubberband(graph);

    var addVertex = function(icon, w, h, style) {
      var vertex = new mxCell(null, new mxGeometry(0, 0, w, h), style);
      vertex.setVertex(true);

      console.log('vertex vertex', vertex);

      var img = addToolbarItem(graph, toolbar, vertex, icon);
      //img.enabled = true;

      graph.getSelectionModel().addListener(mxEvent.CHANGE, function() {
        var tmp = graph.isSelectionEmpty();
        mxUtils.setOpacity(img, (tmp) ? 100 : 20);
        img.enabled = tmp;
      });
    };

    addVertex('https://jgraph.github.io/mxgraph/javascript/examples/editors/images/rounded.gif', 100, 40, 'shape=rounded');
  }
}

function addToolbarItem(graph, toolbar, prototype, image) {
  // Function that is executed when the image is dropped on
  // the graph. The cell argument points to the cell under
  // the mousepointer if there is one.
  var funct = function(graph, evt, cell, x, y) {
    graph.stopEditing(false);

    var vertex = graph.getModel().cloneCell(prototype);
    vertex.geometry.x = x;
    vertex.geometry.y = y;

    graph.addCell(vertex);
    graph.setSelectionCell(vertex);
  }

  // Creates the image which is used as the drag icon (preview)
  var img = toolbar.addMode(null, image, function(evt, cell) {
    var pt = this.graph.getPointForEvent(evt);
    funct(graph, evt, cell, pt.x, pt.y);
  });

  // Disables dragging if element is disabled. This is a workaround
  // for wrong event order in IE. Following is a dummy listener that
  // is invoked as the last listener in IE.
  mxEvent.addListener(img, 'mousedown', function(evt) {
    // do nothing
  });

  // This listener is always called first before any other listener
  // in all browsers.
  mxEvent.addListener(img, 'mousedown', function(evt) {
    if (img.enabled == false) {
      mxEvent.consume(evt);
    }
  });

  mxUtils.makeDraggable(img, graph, funct);

  return img;
}

<
/script> <
/head>

<!-- Calls the main function after the page has loaded. Container is dynamically created. -->
<
body onload = "main();" >
  <
  div class = "table-wrapper" >
  <
  table >
  <
  tr draggable = "true"
ondragstart = "importDragHandler(event)" >
  <
  th > Company < /th> <
  th > Contact < /th> <
  th > Country < /th> <
  /tr> <
  tr draggable = "true"
ondragstart = "importDragHandler(event)" >
  <
  td > Alfreds Futterkiste < /td> <
  td > Maria Anders < /td> <
  td > Germany < /td> <
  /tr> <
  tr draggable = "true"
ondragstart = "importDragHandler(event)" >
  <
  td > Centro comercial Moctezuma < /td> <
  td > Francisco Chang < /td> <
  td > Mexico < /td> <
  /tr>

  <
  /table> <
  /div> <
  div id = "graph-wrapper" >

  <
  /div> <
  script >

  function importDragHandler(event) {
    console.log('event..........', event);
    var elem = document.createElement("div");
    elem.innerHTML = "";
    elem.id = "import_handler_drag_ghost";
    elem.textNode = "Dragging";
    // elem.style.position = "absolute";
    elem.style.top = "-1000px";
    document.body.appendChild(elem);
    event.dataTransfer.setDragImage(elem, 0, 0);
  }

document.addEventListener("dragend", function(e) {
  var ghost = document.getElementById("import_handler_drag_ghost");
  if (ghost.parentNode) {
    //ghost.parentNode.removeChild(ghost);
    $('#import_handler_drag_ghost').fadeOut(3000, function() {
      $('#import_handler_drag_ghost').remove();
    });
  }

}, false);

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

body {
  height: 900px;
}

div:last-child {
  position: absolute;
  overflow: hidden;
  left: 10px !important;
  top: 264px !important;
  border: 1px solid #dedede;
  background: #e5e5e5;
  //padding: 32px;
  height: 100%;
}

#import_handler_drag_ghost {
  width: 90px !important;
  height: 25px !important;
  border: 2px solid;
  background: #fff;
  padding: 0px !important;
}

#graph-wrapper {
  height: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
  mxBasePath = 'https://jgraph.github.io/mxgraph/javascript/src';
</script>
<script src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js"></script>