温州微网站,品牌注册号,wordpress图片专辑,平台软件前言
因为公司业务开发需要拖拽功能。
ps#xff1a;该功能只能针对高度一致的#xff0c;如果高度不一致需要另外二开
演示 开始
templateview styleheight: 100%;movable-area :style{width: 100%, height: allHeight px}该功能只能针对高度一致的如果高度不一致需要另外二开
演示 开始
templateview styleheight: 100%;movable-area :style{width: 100%, height: allHeight px}movable-viewv-for(item, index) in list:keyitem.id:x0:yitem.y:style{height: itemHeight px, width: 100%,}directionalltouchstarthandleDragStart(index)changehandleMoving(index, $event)touchendhandleDragEndclassmovable-view!-- 这里可以放置步骤的详细内容 --view stylebackground-color: aqua; padding: 20rpx 0;{{ item.desc }}/view/movable-view/movable-area/view
/templatescript
export default {data() {return {list: [],cloneList: [],activeIndex: -1, // 选中oldIndex: -1,moveToIndex: -1, // 移动allHeight: 300,itemHeight: 50};},created() {for(let i 0; i 12; i ) {let info {id: i,desc: 测试 i}this.list.push(info)}this.allHeight 12 * this.itemHeightthis.initList(this.list)},methods: {deepCopy(source) {return JSON.parse(JSON.stringify(source));},initList(list[]){const newList this.deepCopy(list);this.list newList.map((item, index) {return {...item,y: index * this.itemHeight,key: Math.random() index};});//拷贝一份初始list值this.cloneList this.deepCopy(this.list);},// 拖拽开始handleDragStart(index) {this.activeIndex index;this.oldIndex index;},handleMoving(index, e){if (e.detail.source ! touch) return;const { x, y } e.detail;const currentY Math.floor((y this.itemHeight / 2) / this.itemHeight);this.moveToIndex Math.min(currentY, this.list.length - 1);//更新移动后的位置if (this.oldIndex ! this.moveToIndex this.oldIndex ! -1 this.moveToIndex ! -1) {const newList this.deepCopy(this.cloneList);//交换位置newList.splice(this.moveToIndex, 0, ...newList.splice(this.activeIndex, 1));this.list.forEach((item, index) {if (index ! this.activeIndex) {const itemIndex newList.findIndex(val val.id item.id);item.y itemIndex*this.itemHeight}});this.oldIndex this.moveToIndex;}},handleDragEnd(e) {if (this.moveToIndex ! -1 this.activeIndex ! -1 this.moveToIndex ! this.activeIndex) {this.cloneList.splice(this.moveToIndex, 0, ...this.cloneList.splice(this.activeIndex, 1));}// 重新排序下更新后的位置。this.initList(this.cloneList);this.activeIndex -1;this.oldIndex -1;this.moveToIndex -1;},},
};
/scriptstyle
.movable-area {}.movable-view {}
/style
