经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue拖拽排序插件vuedraggable使用方法详解
来源:jb51  时间:2018/12/3 9:46:46  对本文有异议

大家好,最近做的项目要用到拖拽排序,我现在的项目是vue项目,所以我就屁颠屁颠的去百度有木有这样功能的插件,我就知道一定会有,那就是vuedraggable,这是一款很棒的拖拽插件,下面我来说一下怎么引入

首先在vue项目中,用npm包下载下来

  1. npm install vuedraggable -S

下载下来后,引入插件,在你的vue文件的script标签里面这样引入

  1. import draggable from 'vuedraggable'

别忘了下面要注册组件

  1. components: {
  2. draggable
  3. },

然后就可以在template标签里面使用了

  1. <draggable v-model="colors" @update="datadragEnd" :options = "{animation:500}">
  2. <transition-group>
  3. <div v-for="element in colors" :key="element.text" class = "drag-item">
  4. {{element.text}}
  5. </div>
  6. </transition-group>
  7. </draggable>

下面贴一下详细用法

  1. <template>
  2. <draggable v-model="colors" @update="datadragEnd" :options = "{animation:500}">
  3. <transition-group>
  4. <div v-for="element in colors" :key="element.text" class = "drag-item">
  5. {{element.text}}
  6. </div>
  7. </transition-group>
  8. </draggable>
  9. </template>
  10.  
  11. <script>
  12. import draggable from 'vuedraggable'
  13. export default{
  14. data(){
  15. return{
  16. msg:"这是测试组件",
  17. colors: [
  18. {
  19. text: "Aquamarine",
  20. },
  21. {
  22. text: "Hotpink",
  23. },
  24. {
  25. text: "Gold",
  26. },
  27. {
  28. text: "Crimson",
  29. },
  30. {
  31. text: "Blueviolet",
  32. },
  33. {
  34. text: "Lightblue",
  35. },
  36. {
  37. text: "Cornflowerblue",
  38. },
  39. {
  40. text: "Skyblue",
  41. },
  42. {
  43. text: "Burlywood",
  44. }
  45. ],
  46. startArr:[],
  47. endArr:[],
  48. count:0,
  49. }
  50. },
  51. components: {
  52.   draggable
  53. },
  54. methods:{
  55. getdata (evt) {
  56. console.log(evt.draggedContext.element.text)
  57. },
  58. datadragEnd (evt) {
  59. evt.preventDefault();
  60. console.log('拖动前的索引 :' + evt.oldIndex)
  61. console.log('拖动后的索引 :' + evt.newIndex)
  62. console.log(this.colors);
  63. }
  64. },
  65. mounted () {
  66. //为了防止火狐浏览器拖拽的时候以新标签打开,此代码真实有效
  67. document.body.ondrop = function (event) {
  68. event.preventDefault();
  69. event.stopPropagation();
  70. }
  71. }
  72. }
  73. </script>
  74.  
  75. <style lang="scss" scoped>
  76. .test{
  77. border:1px solid #ccc;
  78. }
  79. .drag-item{
  80. width: 200px;
  81. height: 50px;
  82. line-height: 50px;
  83. margin: auto;
  84. position: relative;
  85. background: #ddd;
  86. margin-top:20px;
  87. }
  88. .ghostClass{
  89. opacity: 1;
  90. }
  91. .bottom{
  92. width: 200px;
  93. height: 50px;
  94. position: relative;
  95. background: blue;
  96. top:2px;
  97. left: 2px;
  98. transition: all .5s linear;
  99. }
  100. </style>

下面是结果

上下是可以拖动的,只是截图的话看不出效果来,小伙伴们注意了,里面有个options选项,这个选项怎么来的呢,据我观察这个插件是基于sortable.js,所以这个options里面的配置,和sortable.js是一样的,下面我贴两个地址,一个是vuedraggable的GitHub地址,一个是sortable.js的GitHub地址

vuedraggable: 学习地址 

sortable.js:学习地址

options配置如下

  1. var sortable = new Sortable(el, {
  2. group: "name", // or { name: "...", pull: [true, false, clone], put: [true, false, array] }
  3. sort: true, // sorting inside list
  4. delay: 0, // time in milliseconds to define when the sorting should start
  5. touchStartThreshold: 0, // px, how many pixels the point should move before cancelling a delayed drag event
  6. disabled: false, // Disables the sortable if set to true.
  7. store: null, // @see Store
  8. animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
  9. handle: ".my-handle", // Drag handle selector within list items
  10. filter: ".ignore-elements", // Selectors that do not lead to dragging (String or Function)
  11. preventOnFilter: true, // Call `event.preventDefault()` when triggered `filter`
  12. draggable: ".item", // Specifies which items inside the element should be draggable
  13. ghostClass: "sortable-ghost", // Class name for the drop placeholder
  14. chosenClass: "sortable-chosen", // Class name for the chosen item
  15. dragClass: "sortable-drag", // Class name for the dragging item
  16. dataIdAttr: 'data-id',
  17.  
  18. forceFallback: false, // ignore the HTML5 DnD behaviour and force the fallback to kick in
  19.  
  20. fallbackClass: "sortable-fallback", // Class name for the cloned DOM Element when using forceFallback
  21. fallbackOnBody: false, // Appends the cloned DOM Element into the Document's Body
  22. fallbackTolerance: 0, // Specify in pixels how far the mouse should move before it's considered as a drag.
  23.  
  24. scroll: true, // or HTMLElement
  25. scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }, // if you have custom scrollbar scrollFn may be used for autoscrolling
  26. scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
  27. scrollSpeed: 10, // px
  28.  
  29. setData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) {
  30. dataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent
  31. },
  32.  
  33. // Element is chosen
  34. onChoose: function (/**Event*/evt) {
  35. evt.oldIndex; // element index within parent
  36. },
  37.  
  38. // Element dragging started
  39. onStart: function (/**Event*/evt) {
  40. evt.oldIndex; // element index within parent
  41. },
  42.  
  43. // Element dragging ended
  44. onEnd: function (/**Event*/evt) {
  45. var itemEl = evt.item; // dragged HTMLElement
  46. evt.to; // target list
  47. evt.from; // previous list
  48. evt.oldIndex; // element's old index within old parent
  49. evt.newIndex; // element's new index within new parent
  50. },
  51.  
  52. // Element is dropped into the list from another list
  53. onAdd: function (/**Event*/evt) {
  54. // same properties as onEnd
  55. },
  56.  
  57. // Changed sorting within list
  58. onUpdate: function (/**Event*/evt) {
  59. // same properties as onEnd
  60. },
  61.  
  62. // Called by any change to the list (add / update / remove)
  63. onSort: function (/**Event*/evt) {
  64. // same properties as onEnd
  65. },
  66.  
  67. // Element is removed from the list into another list
  68. onRemove: function (/**Event*/evt) {
  69. // same properties as onEnd
  70. },
  71.  
  72. // Attempt to drag a filtered element
  73. onFilter: function (/**Event*/evt) {
  74. var itemEl = evt.item; // HTMLElement receiving the `mousedown|tapstart` event.
  75. },
  76.  
  77. // Event when you move an item in the list or between lists
  78. onMove: function (/**Event*/evt, /**Event*/originalEvent) {
  79. // Example: http://jsbin.com/tuyafe/1/edit?js,output
  80. evt.dragged; // dragged HTMLElement
  81. evt.draggedRect; // TextRectangle {left, top, right и bottom}
  82. evt.related; // HTMLElement on which have guided
  83. evt.relatedRect; // TextRectangle
  84. originalEvent.clientY; // mouse position
  85. // return false; — for cancel
  86. },
  87.  
  88. // Called when creating a clone of element
  89. onClone: function (/**Event*/evt) {
  90. var origEl = evt.item;
  91. var cloneEl = evt.clone;
  92. }
  93. });

好了,今天的介绍就到这里啦,快去试试吧。

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号