小程序图片拖拽 wxp-ui／drag

Component({ externalClasses: ['item-wrap-class'], options: { multipleSlots: true }, properties: { extraNodes: {// 添加节点 按钮位置 type: Array, value: [] }, listData: {// 数据源 type: Array, value: [] }, columns: {// 列数 type: Number, value: 1 }, itemHeight: {// 每个 item 高度, 用于计算 item-wrap 高度 type: Number, value: 0 }, scrollTop: {// 页面滚动高度 type: Number, value: 0 }, }, data: { baseData: {}, // pageMetaSupport: false, platform: '',// 当前系统信息 listWxs: [],// wxs 传回的最新 list 数据 rows: 0,// 行数 /* 渲染数据 */ wrapStyle: '',// item-wrap 样式 list: [],// 渲染数据列 dragging: false, }, methods: { vibrate() { // if (this.data.platform !== "devtools") wx.vibrateShort(); }, pageScroll(e) { // if (this.data.pageMetaSupport) { // this.triggerEvent("scroll", { // scrollTop: e.scrollTop // }); // } else { // wx.pageScrollTo({ // scrollTop: e.scrollTop, // duration: 300 // }); // } wx.pageScrollTo({ scrollTop: e.scrollTop, duration: 300 }); }, drag(e) { this.setData({ dragging: e.dragging }) }, listChange(e) { this.data.listWxs = e.list; }, itemClick(e) { let index = e.currentTarget.dataset.index; let item = this.data.listWxs[index]; this.triggerEvent('click', { key: item.realKey, data: item.data, extra: e.detail }); }, /** * 初始化获取 dom 信息 */ initDom() { let { windowWidth, windowHeight, platform, SDKVersion } = wx.getSystemInfoSync(); let remScale = (windowWidth || 375) / 375; this.data.platform = platform; let baseData = {}; baseData.windowHeight = windowHeight; baseData.columns = this.data.columns; baseData.rows = this.data.rows; const query = this.createSelectorQuery(); query.select(".item").boundingClientRect(); query.select(".item-wrap").boundingClientRect(); query.exec((res) => { baseData.itemWidth = res[0].width; baseData.itemHeight = res[0].height; baseData.wrapLeft = res[1].left; baseData.wrapTop = res[1].top + this.data.scrollTop; this.setData({ dragging: false, baseData }); }); }, //column改变 columnChange() { this.setData({ list: [] }) this.init(); }, //初始化函数 init() { // 初始必须为true以绑定wxs中的函数, this.setData({ dragging: true }); let delItem = (item, extraNode) => ({ id: item.dragId, extraNode: extraNode, fixed: item.fixed, slot: item.slot, data: item }); let { listData, extraNodes } = this.data; let _list = [], _before = [], _after = [], destBefore = [], destAfter = []; extraNodes.forEach((item, index) => { if (item.type === "before") { _before.push(delItem(item, true)); } else if (item.type === "after") { _after.push(delItem(item, true)); } else if (item.type === "destBefore") { destBefore.push(delItem(item, true)); } else if (item.type === "destAfter") { destAfter.push(delItem(item, true)); } }); // 遍历数据源增加扩展项, 以用作排序使用 listData.forEach((item, index) => { destBefore.forEach((i) => { if (i.data.destKey === index) _list.push(i); }); _list.push(delItem(item, false)); destAfter.forEach((i) => { if (i.data.destKey === index) _list.push(i); }); }); let i = 0, columns = this.data.columns; let list = (_before.concat(_list, _after) || []).map((item, index) => { item.realKey = item.extraNode ? -1 : i++; // 真实顺序 item.sortKey = index; // 整体顺序 item.tranX = `${(item.sortKey % columns) * 100}%`; item.tranY = `${Math.floor(item.sortKey / columns) * 100}%`; return item; }); this.data.rows = Math.ceil(list.length / columns); this.setData({ list, listWxs: list, wrapStyle: `height: ${this.data.rows * this.data.itemHeight}rpx` }); console.log(this.data.itemHeight) if (list.length === 0) return; // 异步加载，延迟执行 initDom 方法 setTimeout(() => this.initDom(), 0); } }, ready() { this.init(); } });