React实现拖拽效果

基于 React 的拖拽效果 Demo

一个基于 React 的拖拽功能实现的 Demo.

两个关键点

1, draggable 属性

2, drag 事件

draggable 属性

img 标签默认是支持拖拽的, 当时其他 HTML 标签, 想要其拖动的话, 需要为其添加 draggable="true" 属性

drag 事件

drag 相关的事件有: ondragstart、ondragend、ondragenter、ondragover、ondragleave、ondrop

一般情况下, 在实际使用时, 根据需求会有以下使用情况:

1, 被拖拽元素实现: ondragstart、ondragend

2, 被放置元素实现: ondragenter、ondragover、ondragleave、ondrop

注意: ondragover 的默认事件 Reset the current drag operation to "none". 所以想让一个元素可放置,需要重写 ondragover, 使用 preventDefault() 阻止其默认行为.

JavaScript 复制代码
element.ondragover = event => { 
    event.preventDefault();
    // ...
}

一般会在 ondrop 事件中确定最终行为的实现.

项目简介

项目分为 todo-panel, todo-list, todo-item 三个组件

1, todo-panel 控制整个 demo 效果的布局和总逻辑的实施, 所有响应式的 state 都在该组件中实现.

总控室.

所有需要动态渲染的 state 都在当前组件中配置

2, todo-list 列表组件, 用于展示某种形态的列表

桥梁.

子组件(todo-item)的 drag 行为需要通过 todo-list 组件传递给父组件(todo-panel);

父组件(todo-panel)的 state 变化, 也会引起 todo-list 的动态渲染.

3, todo-item 本 demo 中最小的行动单元, 具体的某一个 todo行为 的 封装组件

也是 被拖拽 的元素(组件), 因此, 在其内部实现了 ondragstart 和 ondragend 两个方法

注意: 当前 demo 只是一个本地的演示, 目的在于说明 drag 行为的实现需要配置的属性 以及 可能需要实现的事件, 在实际工作中可能还需要 ajax 请求的参与, 这里不再赘述.

项目源码地址

源码地址传送门

项目截图

相关推荐
yanessa_yu2 分钟前
全屏滚动网站PC端自适应方案
前端
RoyLin9 分钟前
TypeScript设计模式:桥接模式
前端·后端·typescript
火星开发者11 分钟前
Vue中实现Word、Excel、PDF预览的详细步骤
前端
brzhang17 分钟前
干翻 Docker?WebAssembly 3.0 的野心,远不止浏览器,来一起看看吧
前端·后端·架构
lecepin1 小时前
AI Coding 资讯 2025-09-17
前端·javascript·面试
IT_陈寒1 小时前
React 18实战:7个被低估的Hooks技巧让你的开发效率提升50%
前端·人工智能·后端
树上有只程序猿2 小时前
终于有人把数据库讲明白了
前端
猩兵哥哥2 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
司宸2 小时前
Prompt设计实战指南:三大模板与进阶技巧
前端
RoyLin2 小时前
TypeScript设计模式:抽象工厂模式
前端·后端·typescript