How to simulate drag for rectangle with text

Question

I wanted to drag every table row as rectangle, it must do the same functionality of rectangle.

Once you run the code you can see table below table rectangle will be there on left top, i wanted to replicate the same functionality for table row drag

Question: when i drag table row to below graph area it should be considered as rectangle drag. similar to beside graph area top left rectangle drag.

i'm using(Documentation): https://jgraph.github.io/mxgraph/docs/manual.html

For full view please see codepen: https://codepen.io/eabangalore/pen/vMvdmZ

Video will show you my problem:https://drive.google.com/file/d/1DR3qMxX8JViSwMbA5vWYhMeMgRlQ0Krs/view

// 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>

Please help me thanks in advance !!!

Answer 1

Good Day.

1.First for all You cannot just add element

setTimeout(function(){
     var html = '<div class="simulate"><p>Simulate Above Rect Drag</p></div><div 
     class="simulate"><p>Simulate Above Rect Drag</p></div>';
    $('.geSidebarContainer').append(html);
},3500);

Draging mechanics implemented by own js event handlers!

Draw.io uses own mechanics to sidebar and draging elements from sidebar!

If you want not hard code (and stuck in draw.io codebase), better use Implemented mechanism of Draw.io

2.in Sidebar.js You could add own Pallete

Sidebar.prototype.init = function()
{
    var dir = STENCIL_PATH;

    this.addSearchPalette(true);
    this.addFalconPalette(true);   //Thats my pallete
    .......
}

3.Add Youre Pallete Code In This code You could implement custom elements Whatever you want!

Sidebar.prototype.addFalconPalette = function(expand)
{

    // Avoids having to bind all functions to "this"
    var sb = this;

    // Reusable cells
    var field = new mxCell('+ field: type', new mxGeometry(0, 0, 100, 26), 'text;strokeColor=none;fillColor=none;align=left;verticalAlign=top;spacingLeft=4;spacingRight=4;overflow=hidden;rotatable=0;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;');
    field.vertex = true;

    var divider = new mxCell('', new mxGeometry(0, 0, 40, 8), 'line;strokeWidth=1;fillColor=none;align=left;verticalAlign=middle;spacingTop=-1;spacingLeft=3;spacingRight=3;rotatable=0;labelPosition=right;points=[];portConstraint=eastwest;');
    divider.vertex = true;

    var w = 50;     var h = 50;

    var s = 'shape=mxgraph.bpmn.shape;html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;align=center;perimeter=ellipsePerimeter;outlineConnect=0;';
    var dt = 'Falcon';

    var s2 = 'shape=mxgraph.bpmn.shape;html=1;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;align=center;perimeter=rhombusPerimeter;background=gateway;outlineConnect=0;';
    //default tags
    var dt2 = 'bpmn business process model gateway '; 


    var fns = [
        this.createVertexTemplateEntry(s + 'outline=standard;symbol=general;', w, h, getxml("StartEvent",1), 'StartEvent', null, null, dt + 'general start'),
        this.createVertexTemplateEntry(s + 'outline=end;symbol=general;', w, h, getxml("EndEvent",1), 'EndEvent', null, null, dt + 'general end'),

        this.addEntry(this.getTagsForStencil('mxgraph.bpmn', 'user_task').join(' '), function()
        {
            var cell = new mxCell(getxml("UserTask"), new mxGeometry(0, 0, 120, 80), 'html=1;whiteSpace=wrap;rounded=1;');
            cell.vertex = true;

            // var cell1 = new mxCell('', new mxGeometry(0, 0, 14, 14), 'html=1;shape=mxgraph.bpmn.user_task;outlineConnect=0;');
            // cell1.vertex = true;
            // cell1.geometry.relative = true;
            // cell1.geometry.offset = new mxPoint(7, 7);
            // cell.insert(cell1);

            return sb.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, 'User Task');
        }),

        this.createVertexTemplateEntry(s2 + 'outline=none;symbol=exclusiveGw;', w, h, getxml("ExclusiveGateway",1), 'Exclusive Gateway', null, null, dt2 + 'exclusive'),
        this.createVertexTemplateEntry(s2 + 'outline=none;symbol=parallelGw;', w, h, getxml("ParallelGateway",1), 'Parallel Gateway', null, null, dt2 + 'parallel'),
    ];

    this.addPaletteFunctions('bpmnEvents', mxResources.get('falcon'), expand || false, fns);
};

4.There no need to reimplement Drag mechanics from sidebar. You just need how understand how sidebar works!

5.Better clone Draw.io repo! https://github.com/jgraph/drawio Look at addGeneralPalette there already have custom text Element!

Sidebar.prototype.addGeneralPalette = function(expand)
{
    //return false;
    var lineTags = 'line lines connector connectors connection connections arrow arrows ';

    var fns = [
        this.createVertexTemplateEntry('rounded=0;whiteSpace=wrap;html=1;', 120, 60, '', 'Rectangle', null, null, 'rect rectangle box'),
        this.createVertexTemplateEntry('rounded=1;whiteSpace=wrap;html=1;', 120, 60, '', 'Rounded Rectangle', null, null, 'rounded rect rectangle box'),
        // Explicit strokecolor/fillcolor=none is a workaround to maintain transparent background regardless of current style
        this.createVertexTemplateEntry('text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;',
            40, 20, 'Text', 'Text', null, null, 'text textbox textarea label'),
        this.createVertexTemplateEntry('text;html=1;strokeColor=none;fillColor=none;spacing=5;spacingTop=-20;whiteSpace=wrap;overflow=hidden;rounded=0;', 190, 120,
            '<h1>Heading</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>',
            'Textbox', null, null, 'text textbox textarea'),

Answer 2

You were on the right track. In the drop event handler create the vertex object and populate it with the table data.

So for draggable tables rows: <tr draggable="true" ondragstart="drag(event)">...</tr>

Give the container (the grid) an ID so that you can find it later, and add dragover and drop event handlers:

// Creates the div for the graph
var container = document.createElement("div");   
container.id = "grid" // an ID so we can find it later
container.style.position = "absolute";
// etc...

container.addEventListener("dragover", function(event) {
  event.preventDefault();
});

container.addEventListener("drop", function(event) {
  drop(event);
});

...

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.innerText); // save whatever text you want here
}

function drop(ev) {
  ev.preventDefault();

  var data = ev.dataTransfer.getData("text");

  // Gets the default parent for inserting new cells. This
  // is normally the first child of the root (ie. layer 0).
  var parent = graph.getDefaultParent();
  graph.getModel().beginUpdate();

  var gridRect = $('#grid')[0].getBoundingClientRect();
  var targetX = ev.x - gridRect.x;
  var targetY = ev.y - gridRect.y;

  try {
    var v1 = graph.insertVertex(parent, null, data, targetX, targetY, 300, 30);
  } finally {
    // Updates the display
    graph.getModel().endUpdate();
  }
}

As a side note, to add snap-to-grid round up or down to the nearest grid spacing for the targetX & targetY values.

Codepen: drag and drop table rows