linkmore-design/es/lm-drag/components/DndContainer.js

🌈 🚀lm组件库。🚀

import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { closestCenter, DndContext, DragOverlay, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
import { restrictToParentElement } from '@dnd-kit/modifiers';
import { sortableKeyboardCoordinates } from '@dnd-kit/sortable';
import React from 'react';
import SortableBox from "./sortableBox";
var DragOver = /*#__PURE__*/React.memo(function (_ref) {
  var instance = _ref.instance;
  var isDragging = instance.isDragging,
    activeId = instance.activeId,
    rowKey = instance.rowKey,
    children = instance.children,
    options = instance.options;
  var item = activeId && options.find(function (v) {
    return v[rowKey] === activeId;
  });
  return /*#__PURE__*/React.createElement(DragOverlay, {
    adjustScale: false
  }, isDragging ? children({
    item: item,
    listeners: {},
    isDragging: isDragging
  }) : null);
});

/*
 * restrictToParentElement 拖拽限制在父元素内
 */
// 可拖拽容器
var DndContainer = function DndContainer(_ref2) {
  var options = _ref2.options,
    rowKey = _ref2.rowKey,
    children = _ref2.children,
    move = _ref2.move,
    activationConstraint = _ref2.activationConstraint;
  var _React$useState = React.useState(false),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    isDragging = _React$useState2[0],
    setIsDragging = _React$useState2[1]; // 是否拖拽中
  var _React$useState3 = React.useState(null),
    _React$useState4 = _slicedToArray(_React$useState3, 2),
    activeId = _React$useState4[0],
    setActiveId = _React$useState4[1]; // 是否拖拽中

  var sensors = useSensors(useSensor(PointerSensor, {
    activationConstraint: _objectSpread({
      delay: 150,
      tolerance: 5
    }, activationConstraint)
  }), useSensor(KeyboardSensor, {
    coordinateGetter: sortableKeyboardCoordinates
  }));
  var handleMove = function handleMove(activeItem, overItem) {
    var fileMap = options.map(function (v) {
      if (v[rowKey] === activeItem[rowKey]) {
        return _objectSpread({}, overItem);
      }
      if (v[rowKey] === overItem[rowKey]) {
        return _objectSpread({}, activeItem);
      }
      return v;
    });
    move === null || move === void 0 ? void 0 : move(activeItem, overItem, fileMap);
  };

  // 开始拖拽
  var handleDragStart = function handleDragStart(_ref3) {
    var active = _ref3.active;
    setIsDragging(true);
    if (!active) {
      return;
    }
    setActiveId(active.id);
  };

  // 拖拽结束
  var handleDragEnd = function handleDragEnd(event) {
    var active = event.active,
      over = event.over;
    setActiveId(null);

    // 未移入时触发
    if (!(over !== null && over !== void 0 && over.id)) {
      return;
    }

    // 移入时触发更新数据
    if (active.id !== over.id) {
      handleMove(active.data.current.item, over.data.current.item);
    }
  };
  var instance = {
    isDragging: isDragging,
    activeId: activeId,
    options: options,
    rowKey: rowKey,
    children: children,
    move: move,
    items: options === null || options === void 0 ? void 0 : options.map(function (v) {
      return v[rowKey];
    })
  };
  return /*#__PURE__*/React.createElement(DndContext, {
    sensors: sensors,
    onDragStart: handleDragStart,
    onDragEnd: handleDragEnd,
    onDragCancel: function onDragCancel() {
      return setActiveId(null);
    },
    modifiers: [restrictToParentElement],
    collisionDetection: closestCenter
  }, /*#__PURE__*/React.createElement(SortableBox, {
    instance: instance
  }), /*#__PURE__*/React.createElement(DragOver, {
    instance: instance
  }));
};
export default DndContainer;