小程序图片拖拽(求大神指导)

原文链接： https://juejin.im/post/5af55138f265da0b9c10b07e

data:{
    urls: [
            "http://tmp/wx8d3be87ebfe6b0d4.o6zAJs4SbWj2RI2EZ1HBeqo0BxrU.rtmLUeEWuUOE2d6676c90bbfa548a1fce9f6e2a85935.jpg",
            "http://tmp/wx8d3be87ebfe6b0d4.o6zAJs4SbWj2RI2EZ1HBeqo0BxrU.G5OHFvd7AhVE46e8f4ca373648f348b926ad320ed2d7.jpg",
            "http://tmp/wx8d3be87ebfe6b0d4.o6zAJs4SbWj2RI2EZ1HBeqo0BxrU.0haUDxNTf5tJe38b310b63238f369683dcf8f05acb92.jpg",
            "http://tmp/wx8d3be87ebfe6b0d4.o6zAJs4SbWj2RI2EZ1HBeqo0BxrU.AOdTqw8m2Tr1b33def382b1580d5f4fd4e898c8000ad.jpg",
            "http://tmp/wx8d3be87ebfe6b0d4.o6zAJs4SbWj2RI2EZ1HBeqo0BxrU.6ZCFKyx6m5Csa05a5a13d693ffa61d92aa36939c69e2.jpg",
            "http://tmp/wx8d3be87ebfe6b0d4.o6zAJs4SbWj2RI2EZ1HBeqo0BxrU.hFcgBaBgr2mC40f22d46e112e43951c1079f11ac57fa.jpg",
            "http://tmp/wx8d3be87ebfe6b0d4.o6zAJs4SbWj2RI2EZ1HBeqo0BxrU.37HdGVRWrZvQ84f9eb2227732cf043fe05b728d15a6b.jpg"
        ],
    
        x: 0, //鼠标开始 坐标 x
        y: 0, //鼠标开始 坐标 y
        x1: 0, //当前元素到 页面左侧距离
        y1: 0, //当前元素到 页面顶部距离
        x2: 0,
        y2: 0,
        screenWidth: wx.getSystemInfoSync().windowWidth,  //当前屏幕宽度
        picWidth: (wx.getSystemInfoSync().windowWidth) / 3 - (wx.getSystemInfoSync().windowWidth / 3) * 0.12,  //一行三个图片，一个图片的大致宽度
        //图片移动过程效果参数
        abso_index: "",
        abso_zIndex: 10,
        abso_left: 0,
        abso_top: 0,
     },
     // 图片拖拽
    movestart: function (e) {
        let index = e.target.dataset.index;
        let x = e.touches[0].clientX;
        let y = e.touches[0].clientY;
        let x1 = e.currentTarget.offsetLeft;
        let y1 = e.currentTarget.offsetTop;
        this.setData({
            x: x,
            y: y,
            x1: x1,
            y1: y1,
            abso_index: index
        });
    },
    move: function (e) {
        let x1 = this.data.x1;
        let y1 = this.data.y1;
        let x = this.data.x;
        let y = this.data.y;
        //鼠标移动的位置
        let x2 = e.touches[0].clientX - x;
        let y2 = e.touches[0].clientY - y;
        this.setData({
            abso_zIndex: 100,
            abso_left: (x2 + x1),
            abso_top: (y2 + y1),
            x2: x2,
            y2: y2,
        });
    },
    moveend: function (e) {
        let x1 = this.data.x1;
        let y1 = this.data.y1;
        let x2 = this.data.x2;
        let y2 = this.data.y2;
        if (y2 != 0 || x2 != 0) {
            x2 += x1;
            y2 += y1;
            let picWidth = this.data.picWidth;
            let index = this.data.abso_index;
            let urls = this.data.urls;
            var arr = [];
            for (let i = 0; i < this.data.urls.length; i++) {
                arr.push(this.data.urls[i]);
            }
            if ((Math.abs(x2) > picWidth && Math.abs(x2) < picWidth * 3) || (Math.abs(y2) > picWidth && Math.abs(y2) < picWidth * 3)) {
                let x = parseInt(x2 / picWidth);
                let y = parseInt(y2 / picWidth);
                //计算图片移动的位置
                let newIndex = index + y * 3 + x * 1;
                if (newIndex < urls.length) {
                    let move = arr.splice((index), 1);
                    arr.splice(newIndex, 0, move[0]);
                }
            }
            this.setData({
                urls: arr,
                abso_zIndex: 10,
                abso_left: 0,
                abso_top: 0,
            })
        } else {
            this.setData({
                abso_zIndex: 10,
                abso_left: 0,
                abso_top: 0,
            });
        }
    },
    ```复制代码

转载于:https://juejin.im/post/5af55138f265da0b9c10b07e