H5 拖拽

Demo1 - 基础拖拽

源对象

目标对象

Demo2 - dropEffect 设置移动的光标

源对象

目标对象

Demo1.tsxDemo2.tsxApp.tsx

tsx

const Demo1 = () => {
  const onDragStart = (e) => {
    // @ts-ignore
    e.dataTransfer.setData('index', e.target.dataset.index);
  };

  const onDragOver = (e) => {
    e.preventDefault();
  };

  /** 拖拽到该区域 */
  const onDrop = (e) => {
    alert(e.dataTransfer.getData('index'));
  };

  return (
    <div className='demo'>
      <h3>Demo1 - 基础拖拽</h3>
      <div className='flex'>
        <div className='box1' draggable ondragstart={onDragStart} data-index='1'>
          源对象
        </div>
        <div className='box2' ondragover={onDragOver} ondrop={onDrop}>
          目标对象
        </div>
      </div>
    </div>
  );
};

export default Demo1;

tsx

const Demo2 = () => {
  const onDragStart = (e) => {
    // @ts-ignore
    e.dataTransfer.setData('index', e.target.dataset.index);
  };

  const onDragOver = (e) => {
    //
    e.dataTransfer.dropEffect = 'link'; // 修改移动时的光标样式 默认 copy
    e.preventDefault();
  };

  /** 拖拽到该区域 */
  const onDrop = (e) => {
    alert(e.dataTransfer.getData('index'));
  };

  return (
    <div className='demo'>
      <h3>Demo2 - dropEffect 设置移动的光标</h3>
      <div className='flex'>
        <div className='box1' draggable ondragstart={onDragStart} data-index='1'>
          源对象
        </div>
        <div className='box2' ondragover={onDragOver} ondrop={onDrop}>
          目标对象
        </div>
      </div>
    </div>
  );
};

export default Demo2;

tsx

import './index.css';
import Demo1 from './Demo1';
import Demo2 from './Demo2';

const App = () => (
  <div>
    <div className='flex demo-list'>
      <Demo1 />
      <Demo2 />
    </div>
  </div>
);

export default App;

区域外：dragleave，离开范围
区域内：dragenter，用来确定放置目标是否接受放置。
区域内移动：dragover，用来确定给用户显示怎样的反馈信息
完成拖拽（落下）drop：，允许放置对象。

H5 拖拽 ​

Demo1 - 基础拖拽

Demo2 - dropEffect 设置移动的光标

H5 拖拽