vue拖动排序
代码语言:html
所属分类:拖放
代码描述:vue拖动排序
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/vue.2.2.min.js"></script> <style> ul { list-style: none; padding-bottom: 20px; } .item { cursor: pointer; height: 24px; line-height: 24px; background-color: #9c9c9c; border: 1px solid #d9d9d9; border-radius: 4px; color: #fff; padding: 10px; user-select: none; } </style> </head> <body> <div id="app"> <ul ref="parentNode" @mouseover="onMouseOver" @mouseup="onMouseUp"> <li ref="li" v-for="(item,index) in data" :key="index" class="item" @mouseDown="(event)=>{onMouseDown(event,index)}" >{{item}}</li> </ul> </div> </body> <script> var app = new Vue({ el: '#app', data: { data: [1, 2, 3, 4, 5, 6], isDonw: false, draging: null, dragStartPos: 0 }, mounted () { //为了防止火狐浏览器拖拽的时候以新标签打开,此代码真实有效 document.body.ondrop = function (event) { event.preventDefault(); event.stopPropagation(); } document.onmouseup = ()=> { if (this.isDonw) this.onMouseUp() }; }, computed: { nodes() { return Array.from(this.$refs.parentNode.children) }, itemHeight() { return this.nodes[0].offsetHeight; } }, methods: { onMouseDown(event, index) { this.isDonw = true; this.draging = this.$refs['li'][index]; this.dragStartPos = this.draging.getBoundingClientRect().top; }, onMouseOver(event) { if (this.isDonw) { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0