小程序拖拽排序

柔光的暖阳◎ 2021-09-17 00:32 426阅读 1赞

![20181114164636991.gif][]

效果如图所示

下面给大家分享代码：

### .js ###

var app = getApp();
    var x, y, x1, y1, x2, y2;
    Page({
      data: {
        all_list: [{ id: 1, text: '推荐' }, { id: 2, text: 'logo设计' }, { id: 3, text: 'ui设计' }, { id: 4, text: 'css设计' }, { id: 5, text: 'js设计' }, { id: 6, text: '装修设计' }, { id: 7, text: '圣诞树1' }, { id: 8, text: '圣诞树2' }, { id: 9, text: '圣诞树3' }, { id: 10, text: '圣诞树4' }, { id: 11, text: '圣诞树5' }, { id: 12, text: '圣诞树6' }, { id: 13, text: '圣诞树7' }, { id: 14, text: '圣诞树8' }, { id: 15, text: '圣诞树9' }, { id: 16, text: '圣诞树10' }, { id: 17, text: '圣诞树11' }, { id: 18, text: '圣诞树12' }, { id: 19, text: '圣诞树13' }, { id: 20, text: '圣诞树14' }, { id: 21, text: '圣诞树15' }, { id: 22, text: '圣诞树16' }, { id: 23, text: '圣诞树17' }, { id: 24, text: '圣诞树18' }, { id: 25, text: '圣诞树19' }, { id: 26, text: '家装修' }],//已经增加的列表
        current: -1,
        s_v: 10,
        s_h: 10,
        u_w: 90,
        u_h: 30,
        all_width: '',//总的宽度
        move_x: '', move_y: ''
      },
      onLoad: function () {
        var self = this;
        wx.getSystemInfo({
          success: function (res) {
            var width = self.data.all_width = res.windowWidth, _w = 0, row = 0, column = 0;
            var arr = [].concat(self.data.all_list)
            arr.forEach(function (n, i) {
              n.left = (self.data.u_w + self.data.s_h) * row + self.data.s_h;
              n.top = (self.data.u_h + self.data.s_v) * column + self.data.s_v;
              n._left = n.left;
              n._top = n.top;
              _w += self.data.u_w + self.data.s_h;
              if (_w + self.data.u_w + self.data.s_h > width) {
                _w = 0;
                row = 0;
                column++;
              } else {
                row++;
              }
    
            });
            console.log(arr);
            self.setData({
              all_list: arr
            })
          }
        });
      },
      movestart: function (e) {
        // console.log('start');
        // currindex = e.target.dataset.index;
        // this.data.current = e.target.dataset.index;
        x = e.touches[0].clientX;
        y = e.touches[0].clientY;
        x1 = e.currentTarget.offsetLeft;
        y1 = e.currentTarget.offsetTop;
        // var arr = [].concat(this.data.all_list);
        // arr.forEach(function(n,i){
        //   n._class='move';
        //   n._style='';
        // });
        this.setData({
          current: e.target.dataset.index,
          move_x: x1,
          move_y: y1
        });
      },
      move: function (e) {
        var self = this;
        // // console.log('move',e.target.dataset.current);
        x2 = e.touches[0].clientX - x + x1;
        y2 = e.touches[0].clientY - y + y1;
        // // this.setData({
        // //   current: currindex,
        // //   start: { x: x2, y: y2 }
        // // })
        var underIndex = this.getCurrnetUnderIndex();
    
        // var now_current=this.data.current;
        if (underIndex != null && underIndex != this.data.current) {
          var arr = [].concat(this.data.all_list);
          this.changeArrayData(arr, underIndex, this.data.current);
          // console.log(underIndex);
          // now_current = underIndex;
          this.setData({
            all_list: arr,
            current: underIndex
          })
        }
        // console.log(self.data.current,arr);
    
    
        this.setData({
          move_x: x2,
          move_y: y2
        });
      },
      moveend: function (e) {
    
    
    
    
        this.setData({
          current: -1,
        })
      },
      changeArrayData: function (arr, i1, i2) {
        var temp = arr[i1];
        arr[i1] = arr[i2];
        arr[i2] = temp;
    
        var _left = arr[i1]._left, _top = arr[i1]._top;
        arr[i1]._left = arr[i2]._left;
        arr[i1]._top = arr[i2]._top;
        arr[i2]._left = _left;
        arr[i2]._top = _top;
    
        var left = arr[i1].left, top = arr[i1].top;
        arr[i1].left = arr[i2].left;
        arr[i1].top = arr[i2].top;
        arr[i2].left = left;
        arr[i2].top = top;
    
      },
      getCurrnetUnderIndex: function (endx, endy) {//获取当前移动下方index
        var endx = x2 + this.data.u_w / 2,
          endy = y2 + this.data.u_h / 2;
        var v_judge = false, h_judge = false, column_num = (this.data.all_width - this.data.s_h) / (this.data.s_h + this.data.u_w) >> 0;
        // console.log(endx,endy);
        var _column = (endy - this.data.s_v) / (this.data.u_h + this.data.s_v) >> 0;
        var min_top = this.data.s_v + (_column) * (this.data.u_h + this.data.s_v),
          max_top = min_top + this.data.u_h;
        // console.log('v', _column, endy, min_top, max_top);
        if (endy > min_top && endy < max_top) {
          v_judge = true;
        }
        var _row = (endx - this.data.s_h) / (this.data.u_w + this.data.s_h) >> 0;
        var min_left = this.data.s_h + (_row) * (this.data.u_w + this.data.s_h),
          max_left = min_left + this.data.u_w;
        // console.log('x', _row, endx, min_left, max_left);
        if (endx > min_left && endx < max_left) {
          h_judge = true;
        }
        if (v_judge && h_judge) {
          var index = _column * column_num + _row;
          if (index > this.data.all_list.length - 1) {//超过了
            return null;
          } else {
            return index;
          }
        } else {
          return null;
        }
      }
    })

### .wxml ###

<view >
       <text class='normal_title'>拖动排序</text>
        <view class='item_container'>
        <view wx:for='{
       {all_list}}' class="item {
       {index==current?'moving':'normal'}}"  style="left:{
       {index==current?move_x:item.left}}px;top:{
       {index==current?move_y:item.top}}px" catchtouchmove="move" catchtouchstart="movestart" bindtouchend="moveend" data-index="{
       {index}}">
          {
       {item.text}}
        </view>
       </view> 
    </view>

### **.wxss** ###

.tip{
      color:#aaa;
      font-size:12px;
    }
    .normal_title{
      font-size:16px;
      margin:10rpx 20rpx;
      font-weight: bold;
    }
    .item{
     position:absolute;
     border:1px solid black;
     font-size:13px;
     padding:7px 0px;
     width:90px;
     text-align:center;
     border-radius:90px;
    }
    .item_container{
      height:300rpx;
      /* border:1px solid black; */
      position:relative;
    }

## 感谢原文博主：[http://qiutianaimeili.com/html/page/2018/07/jq08oz9iw4q.html][http_qiutianaimeili.com_html_page_2018_07_jq08oz9iw4q.html] ##

[20181114164636991.gif]: /images/20210813/e08a4d1b85dd43619fa6319a98a20581.png
[http_qiutianaimeili.com_html_page_2018_07_jq08oz9iw4q.html]: http://qiutianaimeili.com/html/page/2018/07/jq08oz9iw4q.html

发表评论取消回复

表情：

评论列表（有 0 条评论，426人围观）

还没有评论，来说两句吧...

相关阅读

相关笔记列表：Draggable 拖拽排序

前言通过上一篇的学习，大家对于 Vue 组件化有了一定的了解。本篇继续使用组件化的思想来实现笔记列表，同时在组件化的基础上，对笔记列表实现拖拽排序的功能。知识准备

r囧r小猫/ 2022年12月09日 05:27/ 0 赞/ 196 阅读

相关 vue 中表格拖拽排序

vue+iview 表格拖拽排序，代码如下 <Table border ref="selection"

妖狐艹你老母/ 2022年11月29日 13:12/ 0 赞/ 294 阅读

相关 Java拖拽排序工具类

package com.ciih.jwt.util.sort; import java.lang.reflect.Field; im

清疚/ 2022年11月12日 13:46/ 0 赞/ 172 阅读

相关 react-dnd拖拽排序

App.js import './App.css'; import React, { useState, useCallback, memo, useMemo

短命女/ 2022年10月05日 01:48/ 0 赞/ 326 阅读

相关 uni-app拖拽排序

<template> <view class='zhuti'> <movable-area class="movable-area"

偏执的太偏执、/ 2022年09月16日 08:41/ 0 赞/ 975 阅读

相关拖拽

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

梦里梦外;/ 2022年06月16日 12:47/ 0 赞/ 321 阅读

相关 vue项目拖拽排序

推荐一个前端组件库：[轮子工厂][Link 1] 我用的是vue-slicksort拖拽组件，这是一个功能强大的可拖拽的vue.js组件。它可以自动滚动，锁定坐标系。支

àì夳堔傛蜴生んèń/ 2022年05月01日 12:12/ 0 赞/ 357 阅读

相关小程序拖拽排序

![20181114164636991.gif][] 效果如图所示下面给大家分享代码： .js var app = getApp(); var x

柔光的暖阳◎/ 2021年09月17日 00:32/ 1 赞/ 427 阅读

相关微信小程序开发图片拖拽

![20170523114106115][] 1.编写页面结构:moveimg.wxml <view class="container" style="heigh

曾经终败给现在/ 2021年09月12日 06:24/ 0 赞/ 445 阅读

相关微信小程序——拖拽定位

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

小鱼儿/ 2021年07月25日 23:00/ 0 赞/ 441 阅读