使用jsPlumb

Question

我正在使用 jsPlumb 处理 vuejs 中的拖放要求。我可以拖放但是问题是当放下元素时没有掉落在我正在下降的确切位置而是它将占据div的初始位置（左上角）。

drag.vue中的html代码：

<template>
<div id="app">
  <div draggable="true" id="drag1" class="Source" @dragstart="start" @dragend="end">drag-1</div>
  <div droppable="true" @dragover.prevent @drop="drop" id="drop-location">
  </div>
</div>
</template>

CSS：

#drag1{
position:relative;
}
#drop-location{
position: relative;
height:400px;
width : 100%;
background-color: grey;
}
.Source { 
    background-color: #EEEEEF;
    border: 1px solid #346789;
    border-radius: 0.5em;
    box-shadow: 2px 2px 5px #AAAAAA;
    color: black;
    min-height: 5em;
    position: absolute;
    min-width: 5em;
    border: 1px solid grey;
    border-radius: 5px;
    width:2%;
}

脚本代码：

 export default {
  data (){
    return{
    id1: 0,
    htmlBase: 'drop-location',
    id2: ''
   }
 },
methods: {
        start: function(event) {this.dragEl = event.target;},
        end: function(event) { this.dragEl = undefined;  },
        drop: function(event, ui) {

        this.id1++
        this.id2 = event.currentTarget.id + this.id1;

        $('<div class=" Source node" id="' + this.id2 +'" data-nodetype="source">').appendTo('#'+ this.htmlBase).html($(("#drag1"))[0].innerHTML);

             jsPlumb.repaintEverything();
             jsPlumb.draggable(this.id2, {
               appendTo: "body",
                cursor: "pointer",
                containment:"drop-location",
                helper: 'clone',
                revert: "invalid",
                containment: 'parent'
            });
       }
  }
}

那么如何将元素放在特定位置呢？有人可以帮忙吗？提前谢谢。

Answer 1

你检查了JsPlumb Docs on Vue2 Integration?

我认为你可以尝试向你的组件添加模板选项：

             jsPlumb.repaintEverything();
             jsPlumb.draggable(this.id2, {
               appendTo: "body",
                cursor: "pointer",
                containment:"drop-location",
                helper: 'clone',
                revert: "invalid",
                containment: 'parent',
                template:'<ul><li v-for="node in nodeTypes" :data-type="type"></li></ul>',
            });