如何用文本模拟矩形拖动

时间：2019-04-19 03:14:23

标签： javascript jquery mxgraph

我想将每个表行都拖动为rectangle，它必须具有与rectangle相同的功能。

运行代码后，您可以在左上下方看到表格下方的表格，我想复制相同的功能表格行 drag

问题：当我在drag表行到graph下方时，应将其视为矩形拖动。类似于旁边 graph区域左上方矩形drag。

我正在使用（文档）：https://jgraph.github.io/mxgraph/docs/manual.html

有关完整视图，请参阅codepen： https://codepen.io/eabangalore/pen/vMvdmZ

视频将向您显示我的问题： 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>

请提前帮助我！！！

2 个答案:

答案 0 :(得分：3)

美好的一天。

1。首先，您不能仅添加元素

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);

由自己的js事件处理程序实现的Draging机制！

Draw.io使用自己的机制对侧边栏和从侧边栏中拖动元素！

如果您不想硬代码（并卡在draw.io代码库中），请更好地使用Draw.io的已实现机制

2。在Sidebar.js中，您可以添加自己的Pallete 

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

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

3。添加您的托盘代码 在此代码中，您可以根据需要实现自定义元素！

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。无需重新实现从边栏拖动机制。 您只需要了解边栏的工作原理即可！

5。更好地克隆Draw.io回购！ https://github.com/jgraph/drawio 看看addGeneralPalette那里已经有自定义文本元素！

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'),

enter image description here

答案 1 :(得分：2)

您在正确的轨道上。在放置事件处理程序中，创建顶点对象，并使用表数据填充它。

对于可拖动表格行：<tr draggable="true" ondragstart="drag(event)">...</tr>

为容器（网格）提供一个ID，以便您以后可以找到它，并添加dragover和drop事件处理程序：

// 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();
  }
}

请注意，要对targetX和targetY值在网格上向上或向下四舍五入到最接近的网格间距。

Codepen：drag and drop table rows

相关问题
最新问题