使用 jsPlumb 将拖动的元素拖放到 vuejs 中的特定位置答案

【问题标题】：Drop the dragged element at specific location in vuejs using jsPlumb使用 jsPlumb 将拖动的元素拖放到 vuejs 中的特定位置
【发布时间】：2018-02-16 06:02:06
【问题描述】：

我正在使用 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'
            });
       }
  }
}

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

【问题讨论】：

标签： drag-and-drop vuejs2 jsplumb

【解决方案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>',
            });

【讨论】：