├── .gitattributes
├── README.md
├── package.json
└── src
    └── drag-sort
        ├── 1px.less
        └── index.vue


/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # mpvue-drag-sort
 2 | 
 3 | > 基于mpvue写的小程序拖拽组件
 4 | 
 5 | ## 如何使用
 6 | 
 7 | ```
 8 | npm i mpvue-drag-sort
 9 | ```
10 | 
11 | ## 基本用法
12 | ``` bash
13 | <template>
14 |   <dragSort :list="list" :props="props" @change="onDragSortChange"></dragSort>
15 | </template>
16 | 
17 | <script>
18 | import dragSort from 'mpvue-drag-sort'
19 | export default {
20 |   components: {
21 |     dragSort
22 |   },
23 |   data () {
24 |     return {
25 |       // 对应需要显示的标题
26 |       props: {
27 |         label: 'label'
28 |       },
29 |       list: [
30 |         {
31 |           label: '标题1'
32 |         },
33 |         {
34 |           label: '标题2'
35 |         },
36 |         {
37 |           label: '标题3'
38 |         },
39 |         {
40 |           label: '标题4'
41 |         },
42 |         {
43 |           label: '标题5'
44 |         }
45 |       ]
46 |     }
47 |   },
48 |   methods: {
49 |     onDragSortChange (e) {
50 |       console.log(e)
51 |       // frontData 插到谁后面
52 |       // data 操作的数据
53 |     }
54 |   }
55 | }
56 | </script>
57 | ```
58 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "mpvue-drag-sort",
 3 |   "version": "1.0.2",
 4 |   "description": "A Mpvue project",
 5 |   "author": "LFZ",
 6 |   "private": false,
 7 |   "main": "src/drag-sort/index.vue",
 8 |   "scripts": {},
 9 |   "license": "ISC"
10 | }
11 | 


--------------------------------------------------------------------------------
/src/drag-sort/1px.less:
--------------------------------------------------------------------------------
  1 | .setLine(@c: #eee) {
  2 |   content: " ";
  3 |   position: absolute;
  4 |   left: 0;
  5 |   top: 0;
  6 |   width: 200%;
  7 |   border: 1rpx solid @c;
  8 |   color: @c;
  9 |   height: 200%;
 10 |   transform-origin: left top;
 11 |   transform: scale(0.5);
 12 | }
 13 | 
 14 | .vh-1px, .vh-1px-t, .vh-1px-b, .vh-1px-tb, .vh-1px-l, .vh-1px-r {
 15 |   position: relative;
 16 | }
 17 | 
 18 | .vh-1px {
 19 |   &:before {
 20 |     .setLine();
 21 |   }
 22 | }
 23 | 
 24 | .vh-1px-t {
 25 |   &:before {
 26 |     .setTopLine();
 27 |   }
 28 | }
 29 | 
 30 | .vh-1px-b {
 31 |   &:after {
 32 |     .setBottomLine();
 33 |   }
 34 | }
 35 | 
 36 | .vh-1px-tb {
 37 |   &:before {
 38 |     .setTopLine();
 39 |   }
 40 |   &:after {
 41 |     .setBottomLine();
 42 |   }
 43 | }
 44 | 
 45 | .vh-1px-l {
 46 |   &:before {
 47 |     .setLeftLine();
 48 |   }
 49 | }
 50 | 
 51 | .vh-1px-r {
 52 |   &:after {
 53 |     .setRightLine();
 54 |   }
 55 | }
 56 | 
 57 | .setTopLine(@c: #eee) {
 58 |   content: " ";
 59 |   position: absolute;
 60 |   left: 0;
 61 |   top: 0;
 62 |   right: 0;
 63 |   height: 1rpx;
 64 |   border-top: 1rpx solid @c;
 65 |   color: @c;
 66 |   transform-origin: 0 0;
 67 |   transform: scaleY(0.5);
 68 | }
 69 | 
 70 | .setBottomLine(@c: #eee) {
 71 |   content: " ";
 72 |   position: absolute;
 73 |   left: 0;
 74 |   bottom: 0;
 75 |   right: 0;
 76 |   height: 1rpx;
 77 |   border-bottom: 1rpx solid @c;
 78 |   color: @c;
 79 |   transform-origin: 0 100%;
 80 |   transform: scaleY(0.5);
 81 | }
 82 | 
 83 | .setLeftLine(@c: #eee) {
 84 |   content: " ";
 85 |   position: absolute;
 86 |   left: 0;
 87 |   top: 0;
 88 |   width: 1rpx;
 89 |   bottom: 0;
 90 |   border-left: 1rpx solid @c;
 91 |   color: @c;
 92 |   transform-origin: 0 0;
 93 |   transform: scaleX(0.5);
 94 | }
 95 | 
 96 | .setRightLine(@c: #eee) {
 97 |   content: " ";
 98 |   position: absolute;
 99 |   right: 0;
100 |   top: 0;
101 |   width: 1rpx;
102 |   bottom: 0;
103 |   border-right: 1rpx solid @c;
104 |   color: @c;
105 |   transform-origin: 100% 0;
106 |   transform: scaleX(0.5);
107 | }
108 | 


--------------------------------------------------------------------------------
/src/drag-sort/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <movable-area class="drag-sort" :style="{height: currentList.length * height + 'px'}" id="drag">
  3 |     <movable-view
  4 |     v-for="(item, index) in currentList"
  5 |     :key="index"
  6 |     :x="0"
  7 |     :y="item.y"
  8 |     direction="vertical"
  9 |     disabled
 10 |     damping="40"
 11 |     :animation="item.animation"
 12 |     class="drag-sort-item"
 13 |     style="height:55px"
 14 |     :class="{'active': active == index, 'vh-1px-t': item.index > 0}">
 15 |       <view class="item">{{item[props.label]}}</view>
 16 |       <view class="touch-tight">
 17 |         <view class="ico_drag"></view>
 18 |       </view>
 19 |     </movable-view>
 20 |     <movable-view
 21 |     class="touch"
 22 |     :x="2000"
 23 |     @touchstart="touchstart"
 24 |     @touchmove="touchmove"
 25 |     @touchend="touchend"
 26 |     catchtouchstart
 27 |     catchtouchmove
 28 |     catchtouchend></movable-view>
 29 |   </movable-area>
 30 | </template>
 31 | 
 32 | <script>
 33 | export default {
 34 |   name: 'drag-sort',
 35 |   mixins: [],
 36 |   components: {},
 37 |   data () {
 38 |     return {
 39 |       height: 55, // 高度
 40 |       currentList: [],
 41 |       active: -1, // 当前激活的item
 42 |       index: 0, // 当前激活的item的原index
 43 |       topY: 0, // 距离顶部的距离
 44 |       deviationY: 0 // 偏移量
 45 |     }
 46 |   },
 47 |   computed: {},
 48 |   props: {
 49 |     list: {
 50 |       type: Array,
 51 |       default: () => {
 52 |         return []
 53 |       }
 54 |     },
 55 |     props: {
 56 |       type: Object,
 57 |       default: () => {
 58 |         return {
 59 |           label: 'label',
 60 |           value: 'value'
 61 |         }
 62 |       }
 63 |     }
 64 |   },
 65 |   watch: {
 66 |     list (val) {
 67 |       this.onUpdateCurrentList()
 68 |     }
 69 |   },
 70 |   created () {
 71 |     this.onUpdateCurrentList()
 72 |   },
 73 |   mounted () {
 74 |   },
 75 |   updated () {},
 76 |   filters: {},
 77 |   methods: {
 78 |     onUpdateCurrentList () {
 79 |       let arr = []
 80 |       for (const key in this.list) {
 81 |         arr.push({
 82 |           ...this.list[key],
 83 |           index: Number(key),
 84 |           y: key * this.height,
 85 |           animation: true
 86 |         })
 87 |       }
 88 |       this.currentList = arr
 89 |     },
 90 |     touchstart (e) {
 91 |       // 计算y轴点击位置
 92 |       var query = wx.createSelectorQuery()
 93 |       query.select('#drag').boundingClientRect()
 94 |       query.exec((res) => {
 95 |         this.topY = res[0].top
 96 |         let touchY = e.mp.touches[0].clientY - res[0].top
 97 |         this.deviationY = touchY % this.height
 98 |         // console.log(touchY)
 99 |         for (const key in this.currentList) {
100 |           if ((this.currentList[key].index * this.height < touchY) && ((this.currentList[key].index + 1) * this.height > touchY)) {
101 |             this.active = key
102 |             this.index = this.currentList[key].index
103 |             break
104 |           }
105 |         }
106 |       })
107 |     },
108 |     touchmove (e) {
109 |       if (this.active < 0) return
110 |       let touchY = (e.mp.touches[0].clientY - this.topY) - this.deviationY
111 |       // console.log(touchY)
112 |       this.currentList[this.active].y = touchY
113 |       this.currentList[this.active].animation = false
114 |       for (const key in this.currentList) {
115 |         // 跳过当前操作的item
116 |         if (this.currentList[key].index !== this.currentList[this.active].index) {
117 |           if (this.currentList[key].index > this.currentList[this.active].index) {
118 |             if (touchY > this.currentList[key].index * this.height - this.height / 2) {
119 |               this.currentList[this.active].index = this.currentList[key].index
120 |               this.currentList[key].index = this.currentList[key].index - 1
121 |               this.currentList[key].y = this.currentList[key].index * this.height
122 |               break
123 |             }
124 |           } else {
125 |             if (touchY < this.currentList[key].index * this.height + this.height / 2) {
126 |               this.currentList[this.active].index = this.currentList[key].index
127 |               this.currentList[key].index = this.currentList[key].index + 1
128 |               this.currentList[key].y = this.currentList[key].index * this.height
129 |               break
130 |             }
131 |           }
132 |         }
133 |       }
134 |     },
135 |     touchend (e) {
136 |       if ((this.index !== this.currentList[this.active].index) && (this.active > -1)) {
137 |         this.$emit('change', {
138 |           // 操作值
139 |           data: (() => {
140 |             let data = {
141 |               ...this.currentList[this.active]
142 |             }
143 |             delete data.index
144 |             delete data.y
145 |             delete data.animation
146 |             return data
147 |           })(),
148 |           // 插队的位置前面的值
149 |           frontData: (() => {
150 |             for (const iterator of this.currentList) {
151 |               if (this.currentList[this.active].index - 1 === iterator.index) {
152 |                 let data = {
153 |                   ...iterator
154 |                 }
155 |                 delete data.index
156 |                 delete data.y
157 |                 delete data.animation
158 |                 return data
159 |               }
160 |             }
161 |           })()
162 |         })
163 |       }
164 |       this.currentList[this.active].animation = true
165 |       this.currentList[this.active].y = this.currentList[this.active].index * this.height
166 |       this.active = -1
167 |     }
168 |   }
169 | }
170 | </script>
171 | 
172 | <style lang='less' scoped>
173 | @import "~./1px.less";
174 | .drag-sort {
175 |   width: 100%;
176 | }
177 | .drag-sort-item {
178 |   position: absolute !important;
179 |   display: flex;
180 |   align-items: center;
181 |   width: 100%;
182 |   padding: 0;
183 |   margin: 0;
184 |   background: #fff;
185 |   padding: 0 15px;
186 |   box-sizing: border-box;
187 |   .item {
188 |     flex: 1;
189 |   }
190 |   .touch-tight {
191 |     width: 24px;
192 |     display: flex;
193 |     justify-content: center;
194 |   }
195 | }
196 | .touch {
197 |   height: 100%;
198 |   width: 50px;
199 | }
200 | .ico_drag {
201 |   display: inline-block;
202 |   width: 24px;
203 |   height: 12px;
204 |   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAYCAYAAAC8/X7cAAAAAXNSR0IArs4c6QAAAEtJREFUWAnt1cEJACAMA0B1/506moIr5FEK51+Jl0d2Vd01+JzB2X90H5jeoPwECBDIBLYlzgDj25Y4JvQAAQIERgtY4u76LHF3Aw8rGQnK3sYAXQAAAABJRU5ErkJggg==) 0 0 no-repeat;
205 |   background-size: 100% auto;
206 | }
207 | .active {
208 |   box-shadow: 0 0 40rpx #DDDDDD;
209 |   z-index: 99;
210 | }
211 | </style>
212 | 


--------------------------------------------------------------------------------