代码之家 › 专栏 › 技术社区 › Gamliel Cohen

拖动一个元素,但删除其他元素的数组

vue.draggable sortablejs vue.js javascript

0

Gamliel Cohen · 技术社区 · 5 年前

我正在使用 Vue.Draggable 基于的库 SortableJS 图书馆。

在我的代码中,我有两个可拖动的列表,但第三个列表没有与简单元素合并。

第三个列表有一个对象数组,每个对象中都有一个端点条目,当我删除元素时,我想做一个函数,从端点获取一个对象数组,并将其与目标列表合并。

var vm = new Vue({
  el: "#main",
  data: {
    list: [{
      name: "John"
    }, {
      name: "Joao"
    }, {
      name: "Jean"
    }],
    list2: [{
      name: "Juan"
    }, {
      name: "Edgard"
    }, {
      name: "Johnson"
    }],
    list3: [{
      name: "First",
      endpoint: 'http://api.com/first'
    }, {
      name: "Second",
      endpoint: 'http://api.com/second'
    }, {
      name: "Third",
      endpoint: 'http://api.com/third'
    }]
  },
  methods: {
  	getAllTheFirstNames (evt) {
    	// i want to do something like this
      axios.get(evt.elementDragged.endpoint)
      	.then(res => {
        	evt.dropList.add(res.data /* res.data is an array of names */)
        })
    },
  
    add: function() {
      this.list.push({
        name: 'Juan'
      });
    },
    replace: function() {
      this.list = [{
        name: 'Edgard'
      }]
    }
  }
});

.normal {
  background-color: grey;
}

.drag {
  background-color: green;
}

.dragArea {
  min-height: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.17.0/vuedraggable.min.js"></script>
<div id="main">
  <h1>Vue Draggable</h1>           
  <div class="drag">
    <h2>List 1 Draggable</h2>
    <draggable v-model="list" class="dragArea" :options="{group:'people'}">
      <div v-for="element in list">{{element.name}}</div>
    </draggable>

    <h2>List 2 Draggable</h2>
    <draggable v-model="list2" class="dragArea" :options="{group:'people'}">
      <div v-for="element in list2">{{element.name}}</div>
    </draggable>

    <h2>List 3 Draggable</h2>
    <draggable v-model="list3" class="dragArea" :options="{group:'people'}" @end="getAllTheFirstNames">
      <div v-for="element in list3">{{element.name}}</div>
    </draggable>
  </div>
</div>

这里是 fiddle

1 回复 | 直到 5 年前

1

0

Gamliel Cohen 5 年前

对于那些有类似问题的人,这里是解决办法。

首先你需要和 @end 事件,然后在方法中,您可以通过访问一个属性来获取被拖动元素的ID,但您将在 v-for 在我的情况下 data-id 所以我可以这样访问它:

let id = evt.item.dataset.id

既然函数中有了ID,就可以用API获取对象数组了。

接下来,您需要使用正确的索引将刚刚恢复的数组添加到第二个列表中,为此,您需要获取第二个列表的目标索引并将其与数组一起馈送:

let index = evt.newIndex
this.secondList.splice(index, 0, ...myArray)

最后一步,您需要清理第二个列表,因为最初拖动的元素也将在那里,对我来说,我只是做了一个循环,如果在其中一个对象中没有找到某个属性,这意味着必须删除它,但您可以真正考虑任何事情。

整个代码如下:

<draggable
    v-model="firstList"
    :clone="clone"
    :options="options"
    @end="onEnd">
    <div
        v-for="c in firstList"
        :key="c.id"
        :data-id="c.id">
    </div>
</draggable>

...

onEnd (evt) {
    const id = evt.item.dataset.id
    HTTP.get(`/${id}/getMyArray`)
        .then(res => {
            let myObjects = JSON.parse(res.data) // => [{...}, {...}, ...]
            let index = evt.newIndex
            this.secondList.splice(index, 0, ...myObjects)
        })
}