实现基于vue.js的拖拽元素的插件

实现基于vue.js的拖拽元素的插件

JavaScript Vue.js相关

详细介绍

Vue.drag.js

vue2 MIT License

实现基于vue.js的拖拽元素的插件

Demo

demo地址

特点

  • 随意拖拽
  • 指定单位进行拖拽

使用

  • 1、引入js文件:
	<script src="vue.drag.js"></script>
  • 2、在要进行拖拽的元素上进行如下声明:
	<div v-drag>拖动我</div>
  • 3、如果需要指定能够使拖拽生效的元素,则进行如下声明: html部分:
	<div id="app">
		<div id="test" v-drag="dragnode">
			<div class="draghandle">只在改元素生效</div>
		</div>		
	</div>

js部分:

	new Vue({
		el: '#app',
		data: {
			movenode: '.movehandle'
		}
	});
推荐源码