Vue перетаскиваемая вставка и обновление - PullRequest
Новая
       43

Vue перетаскиваемая вставка и обновление

0 голосов
/ 27 октября 2018

Я хотел бы создать два списка с возможностью перетаскивания и иметь возможность вставлять и обновлять один список на другой.

Например, в jsfiddle ниже я хочу вставить 'two' из нижнего списка в верхний список, но я также хочу заменить 'thee' вверху на 'three' внизу. Это вообще возможно? 

<div id="app">
  <h2>Drop and Insert</h2>
      <h4>Top</h4>
        <draggable v-model="top" :options="{group:{put: 'numbers'}}" @change="topChange">
          <div v-for="(element, index) in top" :key="index">{{element}}</div>
        </draggable>

      <h4>Bottom</h4>
      <draggable v-model="bottom" :options="{group: {name: 'numbers', pull: 'clone', revertClone : true}}">
        <div v-for="(element, index) in bottom" :key="index">{{element}}</div>
      </draggable>
</div>

new Vue({
  el: "#app",
  data: {
     top: [ 'one', 'thee', 'four'  ],
    bottom: [ 'one', 'two', 'three' ]
  },
  methods: {
    topChange(v) {
        console.log("topchange %o", v) ;
    }
  }
})

https://jsfiddle.net/9omb1zL6/

Я прочитал этот вопрос, но в моем случае это не помогает:

Vue.Draggable: Как «перетащить элемент на другой элемент» вместо добавления / удаления

UPDATE

Я добился прогресса, добавив область под списком. Хотя это улучшение, я все же хотел бы иметь возможность вставлять непосредственно между элементами списка без необходимости сначала удалять, а затем перемещать.

https://jsfiddle.net/9omb1zL6/3/

соответствующий код: 

onMove(evt) {
    this.targetElement = evt.relatedContext.element;
  this.draggedElement = evt.draggedContext.element;
    return false;
},
startDrag(evt) {
    this.targetElement = null;
  this.draggedElement = null;
},
endDrag() {
console.log("target %o, dragged %o", this.targetElement, this.draggedElement) ;
    if (this.targetElement == null) {
    this.top.push(this.draggedElement) ;
  }
  else {
    const ind = this.top.indexOf(this.targetElement) ;
    this.top.splice(ind, 1, this.draggedElement)
  }
}
...