kntmr/vue-draggable-examples.html

## vue-draggable-examples.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Vue Draggable Example</title>
  <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.17.0/vuedraggable.min.js"></script>
  <style>
    body {
      text-align: center;
    }
    #main {
      margin: 0 20%;
      text-align: center;
    }
    .item {
      border: 1px solid #ccc;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <div id="main">
    <h2>Vue Draggable Example</h2>
    <draggable :list="items" :options="{animation: 200}" :move="onmove" @start="onstart" @add="onadd" @remove="onremove" @update="onupdate" @end="onend" @choose="onchoose" @sort="onsort" @filter="onfilter" @clone="onclone">
      <p class="item" v-for="item in items">{{ item }}</p>
    </draggable>
  </div>

  <script>
    const vm = new Vue({
      el: "#main",
      data: {
        items: [
          "xxx",
          "yyy",
          "zzz"
        ]
      },
      methods: {
        onstart: (e) => {
          console.log("onstart")
        },
        onadd: (e) => {
          console.log("onadd")
        },
        onremove: (e) => {
          console.log("onremove")
        },
        onupdate: (e) => {
          console.log("onupdate")
        },
        onend: (e) => {
          console.log("onend")
        },
        onchoose: (e) => {
          console.log("onchoose")
        },
        onsort: (e) => {
          console.log("onsort")
        },
        onfilter: (e) => {
          console.log("onfilter")
        },
        onclone: (e) => {
          console.log("onclone")
        },
        onmove: (e) => {
          console.log("onmove")
          return true
        }
      }
    })
  </script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>Vue Draggable Example</title>
	<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
	<script src="//cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.17.0/vuedraggable.min.js"></script>
	<style>
	body {
	text-align: center;
	}
	#main {
	margin: 0 20%;
	text-align: center;
	}
	.item {
	border: 1px solid #ccc;
	cursor: pointer;
	}
	</style>
	</head>
	<body>

	<div id="main">
	<h2>Vue Draggable Example</h2>
	<draggable :list="items" :options="{animation: 200}" :move="onmove" @start="onstart" @add="onadd" @remove="onremove" @update="onupdate" @end="onend" @choose="onchoose" @sort="onsort" @filter="onfilter" @clone="onclone">
	<p class="item" v-for="item in items">{{ item }}</p>
	</draggable>
	</div>

	<script>
	const vm = new Vue({
	el: "#main",
	data: {
	items: [
	"xxx",
	"yyy",
	"zzz"
	]
	},
	methods: {
	onstart: (e) => {
	console.log("onstart")
	},
	onadd: (e) => {
	console.log("onadd")
	},
	onremove: (e) => {
	console.log("onremove")
	},
	onupdate: (e) => {
	console.log("onupdate")
	},
	onend: (e) => {
	console.log("onend")
	},
	onchoose: (e) => {
	console.log("onchoose")
	},
	onsort: (e) => {
	console.log("onsort")
	},
	onfilter: (e) => {
	console.log("onfilter")
	},
	onclone: (e) => {
	console.log("onclone")
	},
	onmove: (e) => {
	console.log("onmove")
	return true
	}
	}
	})
	</script>

	</body>
	</html>