p-baleine · April 20, 2020 02:01
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
  <head>
    <script src="https://unpkg.com/[email protected]"></script>
    <script src="https://unpkg.com/vue-virtual-scroll-list"></script>
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
    <script src="https://cdn.rawgit.com/Marak/faker.js/v4.1.0/examples/browser/js/faker.min.js"></script>
    <style>
      html {
        font: 16px/1.6 Helvetica Neue,Helvetica,Arial,sans-serif;
        margin: 0;
        padding 0;
      }
      body {
        background-color: #fafafe;
        margin: 2rem;
        color: #000;
      }
      .container {
        display: flex;
        width: 100%;
        align-items: flex-start;
      }      
      .phrase-list {
        overflow-y: auto;
        height: 200px;
        width: 45%;
        margin: 0 2.5% 0;
      }
    </style>
  </head>
  <body>
    <div id="main">
      <div class="container">
        <virtual-list
          class="phrase-list"
          group="phrase-list"
          ref="vlist1"
          :size="50"
          :keeps="20"
          :data-key="'id'"
          :data-sources="items"
          :data-component="Item"
        >
        </virtual-list>

        <virtual-list
          class="phrase-list"
          group="phrase-list"
          ref="vlist2"
          :size="50"
          :keeps="20"
          :data-key="'id'"
          :data-sources="items2"
          :data-component="Item"
        >
        </virtual-list>
      </div>
    </div>

    <script>
      const Item = {
        props: {
          source: {
            type: Object,
            default () {
              return {}
            },
          },
        },
        template: `
          <div class="phrase" :key="source.id">
            {{ source.content }}
          </div>
        `
      }

      function generateItems(length = 100) {
        return Array.from(
          { length },
          (_, id) => ({
            id: id + '',
            content: `${id}：${faker.name.findName()}`
          }));
      }

      new Vue({
        el: '#main',
        components: {
          VirtualList,
        },
        data() {
          return {
            items: generateItems(10000),
            items2: generateItems(1000),
            Item
          }
        },
        mounted () {
          let listEl1 = this.$refs.vlist1.$el.firstElementChild;

          // update items order.
          Sortable.create(listEl1, {
            onSort: (evt) => {
              let { newIndex, oldIndex } = evt;
              let newVal = this.items[newIndex];
              let oldVal = this.items[oldIndex];

              this.items.splice(newIndex, 1, oldVal);
              this.items.splice(oldIndex, 1, newVal);
            }
          });

          let listEl2 = this.$refs.vlist2.$el.firstElementChild;

          // update items order.
          Sortable.create(listEl2, {
            onSort: (evt) => {
              let { newIndex, oldIndex } = evt;
              let newVal = this.items[newIndex];
              let oldVal = this.items[oldIndex];

              this.items.splice(newIndex, 1, oldVal);
              this.items.splice(oldIndex, 1, newVal);
            }
          });
        }
      })
    </script>
  </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<script src="https://unpkg.com/[email protected]"></script>
	<script src="https://unpkg.com/vue-virtual-scroll-list"></script>
	<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
	<script src="https://cdn.rawgit.com/Marak/faker.js/v4.1.0/examples/browser/js/faker.min.js"></script>
	<style>
	html {
	font: 16px/1.6 Helvetica Neue,Helvetica,Arial,sans-serif;
	margin: 0;
	padding 0;
	}
	body {
	background-color: #fafafe;
	margin: 2rem;
	color: #000;
	}
	.container {
	display: flex;
	width: 100%;
	align-items: flex-start;
	}
	.phrase-list {
	overflow-y: auto;
	height: 200px;
	width: 45%;
	margin: 0 2.5% 0;
	}
	</style>
	</head>
	<body>
	<div id="main">
	<div class="container">
	<virtual-list
	class="phrase-list"
	group="phrase-list"
	ref="vlist1"
	:size="50"
	:keeps="20"
	:data-key="'id'"
	:data-sources="items"
	:data-component="Item"
	>
	</virtual-list>

	<virtual-list
	class="phrase-list"
	group="phrase-list"
	ref="vlist2"
	:size="50"
	:keeps="20"
	:data-key="'id'"
	:data-sources="items2"
	:data-component="Item"
	>
	</virtual-list>
	</div>
	</div>

	<script>
	const Item = {
	props: {
	source: {
	type: Object,
	default () {
	return {}
	},
	},
	},
	template: `
	<div class="phrase" :key="source.id">
	{{ source.content }}
	</div>
	`
	}

	function generateItems(length = 100) {
	return Array.from(
	{ length },
	(_, id) => ({
	id: id + '',
	content: `${id}：${faker.name.findName()}`
	}));
	}

	new Vue({
	el: '#main',
	components: {
	VirtualList,
	},
	data() {
	return {
	items: generateItems(10000),
	items2: generateItems(1000),
	Item
	}
	},
	mounted () {
	let listEl1 = this.$refs.vlist1.$el.firstElementChild;

	// update items order.
	Sortable.create(listEl1, {
	onSort: (evt) => {
	let { newIndex, oldIndex } = evt;
	let newVal = this.items[newIndex];
	let oldVal = this.items[oldIndex];

	this.items.splice(newIndex, 1, oldVal);
	this.items.splice(oldIndex, 1, newVal);
	}
	});

	let listEl2 = this.$refs.vlist2.$el.firstElementChild;

	// update items order.
	Sortable.create(listEl2, {
	onSort: (evt) => {
	let { newIndex, oldIndex } = evt;
	let newVal = this.items[newIndex];
	let oldVal = this.items[oldIndex];

	this.items.splice(newIndex, 1, oldVal);
	this.items.splice(oldIndex, 1, newVal);
	}
	});
	}
	})
	</script>
	</body>
	</html>