简介

在使用vue1.x之前的版本的时候，页面中的拖拽功能，我在项目中是直接用的jquery用户界面中的sortable.js，只是在拖拽完成后，在更新的回调函数中又重新排序了存放数据的数组。但是当把某视频剪辑软件升级到2.0以上后发现拖拽功能失效了，于是使用了下面代码。

该案例主要是在用于vuejs2.0中实现的拖拽功能，用到的的射流研究…有Sortable.js，vuedraggable.js，当然还有vue.min.js，提供的案例使用的require.js加载。

实现效果

实现后的效果如图所示：

超文本标记语言主要代码

可拖动的： list=' list 2 ' : move=' getdata ' @ update=' datadragEnd ' : options=' { animation : 300，handle: ' .dargDiv'} '转换组名称=' list-complete ' div v-for=' list 2 '中的元素：键='元素。它。name ' class=' list-complete-item ' div class=' style class DargDiv ' '元素。id } }/div class=' style class ' { element。它。名称} }/div/div/转换组/draggable代码

正文{ font-family: '微软雅黑}[v-斗篷]{ display : none；} #示例{ width :1000 pxmargin :0 auto }。列表-完整-项目{ transition:全1高度：50 px线高： 50px背景技术： # 000;color: # fff文本对齐：中心；font-size :24 px页边距-top :10 px；}.style class { width :100 pxfloat : left }。列表-完成-输入，列表-完成-保持活动状态{ opa city 3360 0；高度： 0px边距-top : 0px；padding: 0pxborder:固体0px}。列表-完整-可排序-选中。列表-完整-可排序-幽灵{ opa city 3360 0；高度： 0px边距-top : 0px；padding: 0pxborder:固体0px}。dargDiv { cursor:move背景：红色；}.wrods { margin-top :50 px；} p {行高：24 px文本对齐：居中；}js代码

要求。config({ urllargs 3360 ' ver=1.0 _ 0 '，paths: { ' vue ' : ' vue.min2 '，' sortablejs ' : ' Sortable '，' vuedragable ' : ' vuedragable ' }，shim : { ' Vue ' : { exports 3: ' Vue ' } })，require(['vue '，' vuedragable ')，function(Vue，drag)日志('拖动前的索引：' evt。oldindex)；console.log('拖动后的索引：' evt。new index)；} } }) })里面的可配置的很多细节请参考参考地址，这里不做详细介绍。

可下载案例地址：Vue .可拖动-case_jb51.rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。