Function onDrop

src/components/Workspace/Layer/index.jsx:159–182

(e)

    }
  }
  function onDrop (e) {
    const dragElement = document.getElementById(dragId)
    const moveOffsetTop = dragElement.offsetTop + 70 // 当前拖拽离顶部的高度
    let step = 0
    if (e.pageY - moveOffsetTop > 0) {
      // 下移
      step = 70
    } else {
      step = 40
    }
    _css(dragElement, 'will-change', `transform`); // 增加动画
    _css(dragElement, 'transition', `all ${300}ms`);
    _css(dragElement, 'transform', `translate3d(0,${e.pageY - moveOffsetTop}px,0)`);
    const dropGroupId = e.currentTarget.dataset.groupid // 拖入的groupId
    const targetId = e.target.dataset.id || e.target.parentElement.dataset.id
    setTimeout(() => {
      _css(dragElement, 'transition', `none`);
      _css(dragElement, 'transform', `translate3d(0,0,0)`); // 清除动画属性
      _css(dragElement, 'will-change', `auto`);
      props.onPropertyChange({ templateId: dragId, groupId: dropGroupId, targetId }, 'layer', 'updateLayer')
    }, 300);
    e.stopPropagation() // 阻止事件冒泡 因为是树结构 不阻止会调用父级的事件

  }
  function onDrag (e) {
    setDragId(e.currentTarget.dataset.id)
  }