Question

我正在尝试渲染一个静态页面，以显示与流程图连接器相连的几个元素。

我不希望用户能够以任何方式拖动/编辑元素之间的连接。

但是，默认情况下，端点确实响应鼠标单击-它们可以被拖动，甚至更糟：释放鼠标按钮后，整个连接消失。

这是我的代码部分，可在两个div元素之间建立连接：

<div id="elema" class="elema">a test</div>
<div id="elemb" class="elemb">a really, ridiculously long test</div>

<script type="text/javascript">
    jsPlumb.ready(function() {

        jsPlumb.connect({
            source:"elema",
            target:"elemb",
            anchors: ['Right', 'Left'],
            connector: [ "Flowchart", { cornerRadius: 20 } ],
            endpoint: ["Dot", {"enabled": false}]
        });

    });
</script>

API文档相当清楚states，我们可以在端点上切换 enabled 属性：

[enabled = true]布尔型可选

是否应为鼠标事件（拖放）启用端点。

但是，这似乎没有任何作用。

我是Java语言的新手，所以如果我遗漏了一些明显的内容，我会向您道歉。

P.S。我正在使用JsPlumb 2.8.0（社区版）。

Answer 1

实际上，当我这样做时，它可以工作。

var sourceEndPoint = {
    endpoint: "Dot",
    enabled: false, // to disable dragging
    paintStyle: {
        stroke: "#9e9e9e",
        fill: "#ffffff",
        radius: 5,
        strokeWidth: 1
    },
    isSource: true,
    connector: [ "Bezier", { curviness: 50, stub: 0 } ],  
};

 instance.addEndpoint(toId.toString(), sourceEndpoint, {anchor: outAnchor, uuid:sourceUUID});

Answer 2

找到了解决方案。

export function getFilesList() {
  const foldersURL: any[] = [];
  getFoldersFromRepo().then((response) => {
    const values = response.values;
    values.forEach((value: any) => {
    //creating API URL for each folder in the repo
      const URL = 'https://bitbucket.abc.com/stash/rest/api/latest/projects/'
                   + value.project.key + '/repos/' + value.slug + '/files?limit=1000';
      foldersURL.push(URL);
        });
    return foldersURL;
      }).then((res) => {
    // console.log('Calling all the URLS in parallel');
    async.map(res, (link, callback) => {
       const options = {
         url: link,
         auth: {
           password: 'password',
           username: 'username',
         },
       };
      const myarray = [];
// This function will consolidate response till the last Page per API.
      consolidatePaginatedResponse(options, link, myarray, callback);
     }, (err, results) => {
       console.log('In err, results function');
       if (err) {
         return console.log(err);
       }
       //Consolidated results after all API calls.
       console.log('results', results);
     });
  })
   .catch((error) => error);
}

function consolidatePaginatedResponse(options, link, myarray, callback) {
  request(options, (error, response, body) => {
    const content = JSON.parse(body);
    content.link = options.url;
    myarray.push(content);
    if (content.isLastPage === false) {
      options.url = link + '&start=' + content.nextPageStart;
      consolidatePaginatedResponse(options, link, myarray, callback);
    } else {
// Final response after consolidation per API
      callback(error, JSON.stringify(myarray));
    }
  });
}

在jsPlumb.importDefaults({ ConnectionsDetachable: false });函数之前调用此函数将禁用所有连接（及其各自的端点）的拖动事件。粗略，但是由于我根本不需要拖放功能，因此可以。

jsPlumb-禁用端点拖动

2 个答案: