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 请求的参与, 这里不再赘述.

项目源码地址

源码地址传送门

项目截图

相关推荐
jump_jump1 小时前
超长定时器 long-timeout
前端·javascript·node.js
Mintopia2 小时前
架构进阶 🏗 从 CRUD 升级到“大工程师视野”
前端·javascript·全栈
Mintopia2 小时前
小样本学习在 WebAI 场景中的技术应用与局限
前端·人工智能·aigc
光影少年2 小时前
vue生态都有哪些?
前端·javascript·vue.js
一只大头猿2 小时前
基于SpringBoot和Vue的超市管理系统
前端·vue.js·spring boot
用户1456775610372 小时前
告别繁琐操作!Excel合并原来可以这么轻松
前端
itslife3 小时前
vite 源码 - 创建 ws 服务
前端·javascript
懒人Ethan3 小时前
解决一个C# 在Framework 4.5反序列化的问题
java·前端·c#
用户1456775610373 小时前
Excel合并数据太麻烦?这个神器3秒搞定,打工人必备!
前端
西洼工作室3 小时前
前端混入与组合实战指南
前端