vue2 jsPlumb设置图例整体不可拖动

在 Vue.js 和 JsPlumb 的组合中，如果你想要禁止单独的图例区域（例如连接线的颜色、大小等说明）被用户直接拖动，你可以通过调整 JsPlumb 的配置来实现。首先，你需要在初始化 JsPlumb 的时候，设置 `isDraggable` 属性为 `false` 或者 `null`。

假设你已经在 Vue 组件中初始化了 JsPlumb，并且有一个特定的容器元素用于图例：

<div class="legend-container" v-bind:draggable="false">这里是图例</div>

然后，在你的 Vue 实例中，可以这样设置：

data() {
  return {
    jsPlumbConfig: {
      Endpoint: 'Dot', // 使用默认的点状端点
      Connections: [ // 连接线的配置
        { anchors: ['Right', 'Left'] }
      ],
      DragOptions: { isDraggable: false }, // 禁止默认拖动
      // 其他JsPlumb配置...
    },
  };
},
methods: {
  initJsPlumb() {
    this.$refs.legendContainer.jsPlumbInstance = JsPlumb.getInstance(this.jsPlumbConfig);
  },
},
mounted() {
  this.initJsPlumb();
}

在这个例子中，当你需要再次启用拖动时，只需将 `isDraggable` 改回 `true` 即可。如果想完全禁用所有拖动操作，可以在 `Connections` 配置中添加更多选项，如 `{ isHoverable: false }` 来阻止鼠标悬停时的预览效果。