小编sea*_*lla的帖子

我正在尝试做这样的事情:

我认为可以使用背景图像和其上方的另一个图像(蒙版)以透明中心完成.但是有可能用纯css做同样的事情吗？

我正在使用Sortable.js和Vue.js。目标是对项目进行排序并保持数据更新。

它在Vue 1.x上运行良好，但是在更新到2.0之后，排序变得不正确。数组仍然可以正确更新，但是DOM中的项目放置在错误的位置。

new Vue({
  el: '#app',
  template: '#sort',
  data: function() {
    return {
      items: [
        "http://placehold.it/200X300?text=image1",
        "http://placehold.it/200X300?text=image2",
        "http://placehold.it/200X300?text=image3",
        "http://placehold.it/200X300?text=image4"
      ],  
    }
  },
  mounted: function() {
    this.$nextTick(function () {
      Sortable.create(document.getElementById('sortable'), {
        animation: 200,
        onUpdate: this.reorder.bind(this),
      });
    })
  },
  methods: {
    reorder: function(event) {
        var oldIndex = event.oldIndex,
            newIndex = event.newIndex;
        this.items.splice(newIndex, 0, this.items.splice(oldIndex, 1)[0]);

    } 
   }
});

jsFiddle https://jsfiddle.net/4bvtofdd/4/

有人能帮我吗？