元素拖拽与定位

简介

1. draggable 是HTML5 中新的全局属性.规定是否允许用户拖动元素。
2. 兼容性: 不支持IE11 以下, 不支持很多安卓手机浏览器 不适合H5端开发

文档

1. Web Api: Document-Darg
2. HTML attribute draggable
3. 适应于元素拖拽到另一个元素里面 较大范围的拖拽.

实战

1. 拖拽时在左上角增加一个图标 只能拖拽图标 否则存在定位不准的问题 也是下一个优化点
2. 使用 node.getBoundingClientRect() 获取元素的坐标
3. 使用 clientX clientY 获取元素相对于整个浏览器的坐标
4. 3,4数据相减 达到获取真正的偏移量

export const dragEventList = (setOtherProps, otherProps) => {
  let draggedRef = null;
  document.addEventListener(
    'dragstart',
    function(event) {
      // 保存拖动元素的引用(ref.)
      draggedRef = event.target;
      event.target.style.opacity = 0.5;
    },
    false,
  );
  document.addEventListener(
    'dragend',
    (event) => {
      // 重置透明度
      event.target.style.opacity = '';
    },
    false,
  );

  /* 放下目标节点时触发事件 */
  document.addEventListener(
    'dragover',
    (event) => {
      // 阻止默认动作
      event.preventDefault();
    },
    false,
  );
  document.addEventListener(
    'drop',
    (event) => {
      // 阻止默认动作（如打开一些元素的链接）
      event.preventDefault();
      // 将拖动的元素到所选择的放置目标节点中
      let infoClientRect = document.getElementById('dropZone').getBoundingClientRect();
      let leftNew = Math.ceil(event.clientX - infoClientRect.left);
      let topNew = Math.ceil(event.clientY - infoClientRect.top);
      if(leftNew < 0 || leftNew > infoClientRect.width || topNew < 0 || topNew > infoClientRect.height){
        console.log('拖拽到了图片区域外部,不能进行拖拽');
        return false;
      }

      let key = draggedRef?.dataset?.mes || draggedRef?.parentNode?.dataset?.mes;
      let item = otherProps.signConfig.find((g) => {
        return g.key === key;
      });
      if(!item){
        return false;
      }
      item.x = leftNew;
      item.y = topNew;
      setOtherProps({
        ...otherProps,
        signConfig: otherProps.signConfig,
      })
      draggedRef.style.left = leftNew; // `${left}px`;
      draggedRef.style.top = topNew; // `${top}px`;
      return true;
    },
    false,
  );
}

参考资料: https://mp.weixin.qq.com/s/Hc3rufhCsMhgzsea1XPiVQ