Question

I'm trying to do drag and drop using JsPlumb in vueJS. I used JsPlumb link and also imported jsplumb but it is not working. I'm getting error as

[Vue warn]: Error in created hook: "TypeError: __WEBPACK_IMPORTED_MODULE_1_jsplumb___default.a.draggable is not a function"

This code is written inside the template

<div class="center_block">
  <ul id="menu">
    <li><img class="decision" src="../assets/images/symbol_decision.png" alt="human_gif"></li>
    <li><img class="input" src="../assets/images/symbol_input1.png" alt="human_gif"></li>
  </ul>
</div>
<div class="layout" id="layoutId" style="height:404px;"></div>

This code is written inside script

import jsPlumb from 'jsplumb'
export default {
  name: 'HelloWorld',
  data() {
    return {
      message: 'Welcome user',
      endpoint1: '',
      i: 0,
      clone: '',
      componentMap: {}
    }
  },
  created() {
    this.endpoint1 = {
      isSource: true,
      isTarget: true,
      endpoint: ['Dot', {
        radius: 4
      }, {
        outlineStroke: 'black'
      }, {
        outlineWidth: 10
      }],
      paintStyle: {
        outlineStroke: 'black',
        outlineWidth: 10
      },
      cssClass: 'ends',
      maxConnections: -1,
      connector: ['Flowchart', {
        stub: [40, 60],
        gap: 5,
        cornerRadius: 5,
        alwaysRespectStubs: true
      }],
      connectorStyle: {
        strokeWidth: 2,
        stroke: '#61B7CF'
      },
      connectorHoverClass: 'connector-line',
      dropOptions: {
        drop: function(e, ui) {
          alert('drop!')
        }
      }
    }
    jsPlumb.draggable('decision', {
      appendTo: 'body',
      cursor: 'pointer',
      containment: 'layoutId',
      helper: 'clone',
      revert: 'invalid'
    })

    window.jsPlumbInstance.droppable('layout', {
      accept: '.decision, .input',
      activeClass: 'ui-state-default',
      hoverClass: 'ui-state-hover',
      drop: function(event, ui) {
        this.clone = ui.helper.clone()
        this.clone.draggable({
          containment: 'layout'
        })

        if (ui.draggable.attr('id') !== null) {
          if (ui.draggable.attr('class').indexOf('decision') !== -1) {
            this.clone.attr('id', 'input_' + this.i)
            this.componentMap['input_' + this.i] = this.clone.attr('name')
            jsPlumb.addEndpoint(this.clone, {
              anchors: ['Left']
            }, this.endpoint1)
            jsPlumb.addEndpoint(this.clone, {
              anchors: ['Right']
            }, this.endpoint1)
          } 
        }
      }
    })
  }
}

can anyone please suggest me where I did the mistake?

Answer 1

我有同样的问题并通过以这种方式导入jsPlumb来修复它：

import jsplum from 'jsplumb'

然后调用应该是这样的：

jsplumb.jsPlumb.ready(function () {
  jsplumb.jsPlumb.connect({
    source: 'item0',
    target: 'item1',
    endpoint: 'Rectangle'
  })

Answer 2

jsPlumb 似乎是非默认导出。

这样做：

import {jsPlumb} from 'jsplumb';

"TypeError: __WEBPACK_IMPORTED_MODULE_1_jsplumb___default.a.draggable is not a function"

2 个答案: