最简单的静态网站,中企动力科技股份官网,河南省建设厅执业资格注册中心,北京市网络推广竞价原文地址【vue中原生H5拖拽排序_拖拽图片也是同样的道理】 H5有基于拖拽的事件机制#xff0c;如果你还不熟悉#xff0c;请看我之前的文章【拖拽上传】中有介绍。
原生拖拽API实现
由于比较简单直接上代码了#xff1a;
!DOCTYPE html
html langen如果你还不熟悉请看我之前的文章【拖拽上传】中有介绍。
原生拖拽API实现
由于比较简单直接上代码了
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title拖拽排序/titlescript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.min.js/scriptstyleul {clear: both;list-style: none;overflow: hidden;}li {cursor: pointer;float: left;height: 32px;line-height: 30px;padding: 0 10px;color: #409eff;border: 1px solid #d9ecff;background-color: #ecf5ff;}/style
/headbodydiv idapp/divscriptnew Vue({template: divh1 stylepadding-left: 30px;连词成句/h1ulli v-for(item,index) in list :keyindex draggabletrue dragstartdragstart(item)dragenteronDragEnter(item,$event) dragendonDragEnd{{item}}/li/ul/div,el: #app,data() {return {oldWord: null,newWord: null,list: [校长, 爷爷, 我, 给, 唱了首歌]}},methods: {dragstart(word) {this.oldWord word},// 记录移动过程中信息onDragEnter(word, e) {this.newWord worde.preventDefault()},// 拖拽结束onDragEnd() {if (this.oldWord ! this.newWord) {let oldWordIndex this.list.indexOf(this.oldWord);let newWordIndex this.list.indexOf(this.newWord);let newList [...this.list];// 删除老的节点newList.splice(oldWordIndex, 1);// 在列表中目标位置增加新的节点newList.splice(newWordIndex, 0, this.oldWord);this.list [...newList];}}}})/script
/body/html效果如下 使用vuedraggable实现拖拽排序 vuedraggable 是基于sortable.js实现的所以需要先引入sortable.js如果是npm安装的则无需再引入。 使用起来也比较简单代码如下 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title拖拽排序/titlescript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.min.js/scriptscript src//cdn.jsdelivr.net/npm/sortablejs1.8.4/Sortable.min.js/scriptscript src//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js/scriptstyleul {clear: both;list-style: none;overflow: hidden;}li {cursor: pointer;float: left;height: 32px;line-height: 30px;padding: 0 10px;color: #409eff;border: 1px solid #d9ecff;background-color: #ecf5ff;}/style
/headbodydiv idapp/divscriptlet draggable vuedraggable;new Vue({components: {draggable},template: divh1 stylepadding-left: 30px;连词成句/h1uldraggable v-modellist grouppeople startdragtrue enddragfalseli v-for(item,index) in list :keyindex{{item}}/li/draggable/ul/div,el: #app,data() {return {drag: false,list: [校长, 爷爷, 我, 给, 唱了首歌]}}})/script
/body/html参考资料
拖拽上传vue中使用vuedraggable实现图片的拖拽排序基于vue element-ui 封装上传图片组件 功能:上传,删除,预览,上传图片水印,拖拽排序,上传进度条等
