微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

如何避免在 mxgraph 中重复拖动

分类：编程问答

如何解决如何避免在 mxgraph 中重复拖动

我想避免在 mxgraph 画布上重复放置。

假设我第二次在画布上拖动了 Pipe，它不应该允许它在画布上拖动。

问题：如何避免在画布上重复放置

这是我的工作代码拖动，允许重复

拖放

var graph = {};

function initCanvas() {

  //This function is called onload of body itself and it will make the mxgraph canvas
  graph = new mxGraph(document.getElementById('graph-wrapper'));
  graph.htmlLabels = true;
  graph.cellsEditable = false;

  // render as HTML node always. You probably won't want that in real world though
  graph.convertValuetoString = function(cell) {
    return cell.value;
  }

  const createDropHandler = function (cells,allowSplit) {
    return function (graph,evt,target,x,y) {
      const select = graph.importCells(cells,y,target);
      graph.setSelectionCells(select);
    };
  };

  const createDragPreview = function (width,height) {
    var elt = document.createElement('div');
    elt.style.border = '1px dashed black';
    elt.style.width = width + 'px';
    elt.style.height = height + 'px';
    return elt;
  };

  const createDragSource = function (elt,dropHandler,preview) {
    return mxUtils.makeDraggable(elt,graph,preview,graph.autoscroll,true,true);
  };

  const createItem = (id) => {

    const elt = document.getElementById(id);
    const width = elt.clientWidth;
    const height = elt.clientHeight;

    const cell = new mxCell('',new mxGeometry(0,width,height),'fillColor=none;strokeColor=none');
    cell.vertex = true;
    graph.model.setValue(cell,elt);

    const cells = [cell];

    const bounds = new mxRectangle(0,height);
    createDragSource(elt,createDropHandler(cells,false,bounds),createDragPreview(width,cells,bounds);
  };


  createItem("shape_1");
  createItem("shape_2");
  createItem("shape_3");
}
#graph-wrapper {
  background: #333;
  width: 100%;
  height: 528px;
 }
<html>

<head>
    <title>Toolbar example for mxGraph</title>

    <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>
    <script src="./app.js"></script>
</head>

<body onload="initCanvas()">
    <h4>Drag same Box 2 times on the canvas. see duplicate is allowed</h4>

    <div>
        <div id="shape_1"
            style="width: 100px; height: 100px; border-radius: 50%; background: red; display: inline-flex; text-align: center; color: #fff; align-items: center; justify-content: center;">
            Pipe
        </div>

        <div draggable="true" id="shape_2"
            style="width: 100px; height: 100px; border-radius: 5%; background: orange; display: inline-flex; text-align: center; color: #fff; align-items: center; justify-content: center;">
            Team
        </div>
        
        <div draggable="true" id="shape_3"
            style="width: 100px; height: 64px; background: #009688; display: inline-flex; text-align: center; color: #fff; align-items: center; justify-content: center; border-radius: 207px; flex-direction: column;">
            <div> <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
                    <path d="M0 0h24v24H0V0z" fill="none" />
                    <path
                        d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
                </svg></div>
            <div>Info</div>
        </div>
    </div>

    <div id="graph-wrapper">

    </div>
</body>

</html>

解决方法

您只需要检查 maxgarph 中 createDropHandler 的所有当前单元格值。因此，通过 graph.getModel().cells 获取所有单元格，然后检查您要添加的单元格是否存在：

let allcells = graph.getModel().cells;
for (var i in allcells)
    if (allcells[i].value && (allcells[i].value.id == cells[0].value.id))
        return;


var graph = {};

function initCanvas() {
    //This function is called onload of body itself and it will make the mxgraph canvas
    graph = new mxGraph(document.getElementById('graph-wrapper'));
    graph.htmlLabels = true;
    graph.cellsEditable = false;

    // render as HTML node always. You probably won't want that in real world though
    graph.convertValueToString = function (cell) {
        return cell.value;
    }

    const createDropHandler = function (cells,allowSplit) {
        return function (graph,evt,target,x,y) {
            debugger
            let allcells = graph.getModel().cells;
            for (var i in allcells)
                if (allcells[i].value && (allcells[i].value.id == cells[0].value.id))
                    return;
            const select = graph.importCells(cells,y,target);
            graph.setSelectionCells(select);
        };
    };

    const createDragPreview = function (width,height) {
        var elt = document.createElement('div');
        elt.style.border = '1px dashed black';
        elt.style.width = width + 'px';
        elt.style.height = height + 'px';
        return elt;
    };

    const createDragSource = function (elt,dropHandler,preview) {
        return mxUtils.makeDraggable(elt,graph,preview,graph.autoscroll,true,true);
    };

    const createItem = (id) => {
        const elt = document.getElementById(id);
        const width = elt.clientWidth;
        const height = elt.clientHeight;

        const cell = new mxCell('',new mxGeometry(0,width,height),'fillColor=none;strokeColor=none');
        cell.vertex = true;
        graph.model.setValue(cell,elt);

        const cells = [cell];

        const bounds = new mxRectangle(0,height);
        createDragSource(elt,createDropHandler(cells,false,bounds),createDragPreview(width,cells,bounds);
    };


    createItem("shape_1");
    createItem("shape_2");
    createItem("shape_3");
}
<html>

<head>
    <title>Toolbar example for mxGraph</title>

    <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>
    <script src="./app.js"></script>
    <style>
        #graph-wrapper {
            background: #333;
            width: 100%;
            height: 528px;
        }
    </style>
</head>

<body onload="initCanvas()">
    <h4>Drag same box 2 times on the canvas. see duplicate is allowed</h4>

    <div>
        <div id="shape_1"
             style="width: 100px; height: 100px; border-radius: 50%; background: red; display: inline-flex; text-align: center; color: #fff; align-items: center; justify-content: center;">
            Pipe
        </div>

        <div draggable="true" id="shape_2"
             style="width: 100px; height: 100px; border-radius: 5%; background: orange; display: inline-flex; text-align: center; color: #fff; align-items: center; justify-content: center;">
            Team
        </div>

        <div draggable="true" id="shape_3"
             style="width: 100px; height: 64px; background: #009688; display: inline-flex; text-align: center; color: #fff; align-items: center; justify-content: center; border-radius: 207px; flex-direction: column;">
            <div>
                <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
                    <path d="M0 0h24v24H0V0z" fill="none" />
                    <path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
                </svg>
            </div>
            <div>Info</div>
        </div>
    </div>

    <div id="graph-wrapper">

    </div>

,

首先，我对mxgraph一无所知。为了解决您的问题，我对图书馆的文档进行了一些研究，但没有找到任何提示。

我使用了 Javascript 的基础知识来实现​​这一点，并且没有涉及您的任何主要代码和流程。我只是在 draggable_status 函数上将 graph 添加到 createDropHandler 元素。

当你拖动一次时，下面的代码会为对象添加一个状态，你不能再拖动了，只需添加一个简单的控件。

graph.draggable_status = false;

要控制，应该在同一个函数-const createDropHandler = function (cells,allowSplit)

if(graph.draggable_status != false){
  const select = graph.importCells(cells,target);
  graph.setSelectionCells(select);
  graph.draggable_status = false;
}

完整的代码片段在这里;

var graph = {};

function initCanvas() {

  //This function is called onload of body itself and it will make the mxgraph canvas
  graph = new mxGraph(document.getElementById('graph-wrapper'));
  graph.htmlLabels = true;
  graph.cellsEditable = false;

  // render as HTML node always. You probably won't want that in real world though
  graph.convertValueToString = function(cell) {
    return cell.value;
  }

  const createDropHandler = function (cells,allowSplit) {
    return function (graph,y) {
      if(graph.draggable_status != false){
        const select = graph.importCells(cells,target);
        graph.setSelectionCells(select);
        graph.draggable_status = false;
      }
    };
  };

  const createDragPreview = function (width,height) {
    var elt = document.createElement('div');
    elt.style.border = '1px dashed black';
    elt.style.width = width + 'px';
    elt.style.height = height + 'px';
    return elt;
  };

  const createDragSource = function (elt,preview) {
    return mxUtils.makeDraggable(elt,true);
  };

  const createItem = (id) => {

    const elt = document.getElementById(id);
    const width = elt.clientWidth;
    const height = elt.clientHeight;

    const cell = new mxCell('','fillColor=none;strokeColor=none');
    cell.vertex = true;
    graph.model.setValue(cell,elt);

    const cells = [cell];

    const bounds = new mxRectangle(0,height);
    createDragSource(elt,bounds);
  };


  createItem("shape_1");
  createItem("shape_2");
  createItem("shape_3");
}
#graph-wrapper {
  background: #333;
  width: 100%;
  height: 528px;
 }
<html>

<head>
    <title>Toolbar example for mxGraph</title>

    <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>
    <script src="./app.js"></script>
</head>

<body onload="initCanvas()">
    <h4>Drag same box 2 times on the canvas. see duplicate is allowed</h4>

    <div>
        <div id="shape_1"
            style="width: 100px; height: 100px; border-radius: 50%; background: red; display: inline-flex; text-align: center; color: #fff; align-items: center; justify-content: center;">
            Pipe
        </div>

        <div draggable="true" id="shape_2"
            style="width: 100px; height: 100px; border-radius: 5%; background: orange; display: inline-flex; text-align: center; color: #fff; align-items: center; justify-content: center;">
            Team
        </div>
        
        <div draggable="true" id="shape_3"
            style="width: 100px; height: 64px; background: #009688; display: inline-flex; text-align: center; color: #fff; align-items: center; justify-content: center; border-radius: 207px; flex-direction: column;">
            <div> <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
                    <path d="M0 0h24v24H0V0z" fill="none" />
                    <path
                        d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
                </svg></div>
            <div>Info</div>
        </div>
    </div>

    <div id="graph-wrapper">

    </div>
</body>

</html>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot