<h3>普通用法</h3>
<ul class="free" id="free">
  <li class="item item-1">item-1</li>
  <li class="item item-2">item-2</li>
  <li class="item item-3">item-3</li>
  <li class="item item-4">item-4</li>
  <li class="item item-5">item-5</li>
  <li class="item item-6">item-6</li>
  <li class="item item-7">item-7</li>
  <li class="item item-8">item-8</li>
  <li class="item item-9">item-9</li>
  <li class="item item-10">item-10</li>
  <li class="item item-11">item-11</li>
  <li class="item item-12">item-12</li>
  <li class="item item-13">item-13</li>
  <li class="item item-14">item-14</li>
  <li class="item item-15">item-15</li>
</ul>

<h3>结合MVVM框架</h3>
<div id="app"></div>
body {
      padding: 0 30px 100px;
    }

    ul {
      padding: 0;
      margin: 0;
      list-style: none;
    }

    #row-drag {
      display: -webkit-box;
      display: flex;
    }

    #row-drag .item {
      width: 100px;
    }

    .item {
      position: relative;
      background-color: #fff;
      -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
      box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
      height: 100px;
      text-align: center;
      line-height: 100px;
    }

    .free {
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      width: 500px;
      position: relative;
    }

    .free .item {
      width: 100px;
    }

// 一般用法
const dragger2 = new window.Sorter(document.getElementById('free'))
console.log(dragger2)

// 结合MVVM框架
new window.Vue({
  el: '#app',
  data() {
	  return {
      list: [],
    }
  },
  created() {
    this.list = [...Array(15)].map((n, i) => i)
  },
  mounted() {
    this.dragger = new window.Sorter(this.$refs.list, {
      change: false,
    })
    this.dragger.on('drag-over', pos => {
      this.changeItem(pos);
      setTimeout(() => {
      this.dragger.freshThreshold();
      }, 20)
    })
  },
  methods: {
    changeItem({source, target}) {
      let list = this.list;
      // 取出被拖拽元素
      let temp = list.splice(source, 1);
      // 截取开头到被交换位置的元素
      let start = list.splice(0, target);
      // 组装成结果数组
      this.list = [...start, ...temp, ...list];
    },
  },
  template: `
  <div class="app">
    <ul class="free list" ref="list">
      <li class="item" v-for="it in list" :key="it">item {{it}}</li>
    </ul>
  </div>
  `,
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.6/vue.min.js
  2. https://unpkg.com/@redbuck/sorter@0.0.6/lib/sorter.js