zhsw_wechat/miniprogram_npm/tdesign-miniprogram/upload/drag.wxs

var classPrefix = '';
var startIndex = 0;
var endIndex = 0;
var dragCollisionList = [];

var isOutRange = function (x1, y1, x2, y2, x3, y3) {
  return x1 < 0 || x1 >= y1 || x2 < 0 || x2 >= y2 || x3 < 0 || x3 >= y3;
};

var sortCore = function (sKey, eKey, st) {
  var _ = st.dragBaseData;

  var excludeFix = function (cKey, type) {
    if (st.list[cKey].fixed) {
      // fixed 元素位置不会变化, 这里直接用 cKey(sortKey) 获取, 更加快捷
      type ? --cKey : ++cKey;
      return excludeFix(cKey, type);
    }
    return cKey;
  };

  // 先获取到 endKey 对应的 realKey, 防止下面排序过程中该 realKey 被修改
  var endRealKey = -1;
  st.list.forEach(function (item) {
    if (item.sortKey === eKey) endRealKey = item.realKey;
  });

  return st.list.map(function (item) {
    if (item.fixed) return item;
    var cKey = item.sortKey;
    var rKey = item.realKey;

    if (sKey < eKey) {
      // 正序拖动
      if (cKey > sKey && cKey <= eKey) {
        --rKey;
        cKey = excludeFix(--cKey, true);
      } else if (cKey === sKey) {
        rKey = endRealKey;
        cKey = eKey;
      }
    } else if (sKey > eKey) {
      // 倒序拖动
      if (cKey >= eKey && cKey < sKey) {
        ++rKey;
        cKey = excludeFix(++cKey, false);
      } else if (cKey === sKey) {
        rKey = endRealKey;
        cKey = eKey;
      }
    }

    if (item.sortKey !== cKey) {
      item.tranX = (cKey % _.columns) * 100 + '%';
      item.tranY = Math.floor(cKey / _.columns) * 100 + '%';
      item.sortKey = cKey;
      item.realKey = rKey;
    }
    return item;
  });
};

var triggerCustomEvent = function (list, type, ins) {
  var _list = [],
    listData = [];

  list.forEach(function (item) {
    _list[item.sortKey] = item;
  });

  _list.forEach(function (item) {
    if (!item.extraNode) {
      listData.push(item.data);
    }
  });

  ins.triggerEvent(type, { listData: listData });
};

var longPress = function (event, ownerInstance) {
  var ins = event.instance;
  var st = ownerInstance.getState();
  var _ = st.dragBaseData;

  var sTouch = event.changedTouches[0];
  if (!sTouch) return;

  st.cur = ins.getDataset().index;
  longPressIndex = st.cur;

  // 初始项是固定项则返回
  var item = st.list[st.cur];
  if (item && item.fixed) return;

  // 如果已经在 drag 中则返回, 防止多指触发 drag 动作, touchstart 事件中有效果
  if (st.dragging) return;
  st.dragging = true;
  ownerInstance.callMethod('dragStatusChange', { dragging: true });

  // 计算X,Y轴初始位移, 使 item 中心移动到点击处, 单列时候X轴初始不做位移
  st.tranX = _.columns === 1 ? 0 : sTouch.pageX - (_.itemWidth / 2 + _.wrapLeft);
  st.tranY = sTouch.pageY - (_.itemHeight / 2 + _.wrapTop);
  st.sId = sTouch.identifier;
  ins.setStyle({
    transform: 'translate3d(' + st.tranX + 'px, ' + st.tranY + 'px, 0)',
  });
  st.itemsInstance.forEach(function (item, index) {
    item.removeClass(classPrefix + '__drag--tran').removeClass(classPrefix + '__drag--cur');
    item.addClass(index === st.cur ? classPrefix + '__drag--cur' : classPrefix + '__drag--tran');
  });
  ownerInstance.callMethod('dragVibrate', { vibrateType: 'longPress' });
};

var touchMove = function (event, ownerInstance) {
  var ins = event.instance;
  var st = ownerInstance.getState();
  var _ = st.dragBaseData;

  var mTouch = event.changedTouches[0];
  if (!mTouch) return;

  if (!st.dragging) return;

  // 如果不是同一个触发点则返回
  if (st.sId !== mTouch.identifier) return;

  // 计算X,Y轴位移, 单列时候X轴初始不做位移
  var tranX = _.columns === 1 ? 0 : mTouch.pageX - (_.itemWidth / 2 + _.wrapLeft);
  var tranY = mTouch.pageY - (_.itemHeight / 2 + _.wrapTop);

  // 到顶到底自动滑动
  if (mTouch.clientY > _.windowHeight - _.itemHeight - _.realBottomSize) {
    // 当前触摸点pageY + item高度 - (屏幕高度 - 底部固定区域高度)
    ownerInstance.callMethod('pageScroll', {
      scrollTop: mTouch.pageY + _.itemHeight - (_.windowHeight - _.realBottomSize),
    });
  } else if (mTouch.clientY < _.itemHeight + _.realTopSize) {
    // 当前触摸点pageY - item高度 - 顶部固定区域高度
    ownerInstance.callMethod('pageScroll', {
      scrollTop: mTouch.pageY - _.itemHeight - _.realTopSize,
    });
  }

  // 设置当前激活元素偏移量
  ins.setStyle({
    transform: 'translate3d(' + tranX + 'px, ' + tranY + 'px, 0)',
  });

  var startKey = st.list[st.cur].sortKey;
  var curX = Math.round(tranX / _.itemWidth);
  var curY = Math.round(tranY / _.itemHeight);
  var endKey = curX + _.columns * curY;

  // 目标项是固定项则返回
  var item = st.list[endKey];
  if (item && item.fixed) return;

  // X轴或Y轴超出范围则返回
  if (isOutRange(curX, _.columns, curY, _.rows, endKey, st.list.length)) return;

  // 防止拖拽过程中发生乱序问题
  if (startKey === endKey || startKey === st.preStartKey) return;
  st.preStartKey = startKey;

  dragCollisionList = sortCore(startKey, endKey, st);
  startIndex = startKey;
  endIndex = endKey;
  st.itemsInstance.forEach(function (itemIns, index) {
    var item = dragCollisionList[index];
    if (index !== st.cur) {
      itemIns.setStyle({
        transform: 'translate3d(' + item.tranX + ',' + item.tranY + ', 0)',
      });
    }
  });

  ownerInstance.callMethod('dragVibrate', { vibrateType: 'touchMove' });
  ownerInstance.callMethod('dragCollision', {
    dragCollisionList: dragCollisionList,
    startIndex: startIndex,
    endIndex: endIndex,
  });
  triggerCustomEvent(dragCollisionList, 'change', ownerInstance);
};

var touchEnd = function (event, ownerInstance) {
  var ins = event.instance;
  var st = ownerInstance.getState();

  if (!st.dragging) return;
  triggerCustomEvent(st.list, 'sortend', ownerInstance);
  ins.addClass(classPrefix + '__drag--tran');
  ins.setStyle({
    transform: 'translate3d(' + st.list[st.cur].tranX + ',' + st.list[st.cur].tranY + ', 0)',
  });
  st.preStartKey = -1;
  st.dragging = false;
  ownerInstance.callMethod('dragStatusChange', { dragging: false });
  ownerInstance.callMethod('dragEnd', {
    dragCollisionList: dragCollisionList,
    startIndex: startIndex,
    endIndex: endIndex,
  });
  st.cur = -1;
  st.tranX = 0;
  st.tranY = 0;
};

var baseDataObserver = function (newVal, oldVal, ownerInstance, ins) {
  var st = ownerInstance.getState();
  st.dragBaseData = newVal;
  classPrefix = newVal.classPrefix;
};

var listObserver = function (newVal, oldVal, ownerInstance, ins) {
  var st = ownerInstance.getState();
  st.itemsInstance = ownerInstance.selectAllComponents('.' + classPrefix + '__drag-item');
  st.list = newVal || [];
  st.list.forEach(function (item, index) {
    var itemIns = st.itemsInstance[index];
    if (item && itemIns) {
      itemIns.removeClass(classPrefix + '__drag--tran');
      itemIns.setStyle({
        transform: 'translate3d(' + item.tranX + ',' + item.tranY + ', 0)',
      });
      if (item.fixed) itemIns.addClass(classPrefix + '__drag--fixed');
    }
  });
  dragCollisionList = [];
};

module.exports = {
  longPress: longPress,
  touchMove: touchMove,
  touchEnd: touchEnd,
  baseDataObserver: baseDataObserver,
  listObserver: listObserver,
};