React 实现点击拖拽功能onDrag

最新推荐文章于 2024-06-06 13:52:43 发布
最新推荐文章于 2024-06-06 13:52:43 发布
阅读量6k 收藏 3
点赞数
文章标签： react onDrag 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
        <style>
            .item {
                border: 1px solid #1da921;
                width: 180px;
                border-radius: 5px;
                box-shadow: 0 0 5px 0 #b3b3b3;
                margin: 5px auto;
                background: #fff;
            }
            .item.active {
                border-style: dashed;
            }
            .item-header {
                font-size: 12px;
                color: #9e9e9e;
                padding: 3px 5px;
            }
            .item-main {
                padding: 5px;
                font-size: 14px;
                color: #424242;
                height: 36px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }
            .item-header-point {
                background: #ccc;
                float: right;
                padding: 0 4px;
                min-width: 10px;
                text-align: center;
                color: #fff;
                border-radius: 50%;
            }
            .col {
                border: 1px solid #d2d2d2;
                flex-grow: 1;
                width: 180px;
                height: 100%;
                margin: 0 2px;
                background: #eee;
                flex-grow: 1;
                display: flex;
                flex-direction: column;
            }
            .col-header {
                height: 40px;
                line-height: 40px;
                background: #1DA921;
                color: #fff;
                text-align: center;
            }
            .col-main {
                overflow: auto;
                flex-grow: 1;
            }
            .col-main.active {
                background: #00ad23;
                opacity: 0.1;
            }
            .task-wrapper {
                display: flex;
                height: 400px;
                width: 700px;
            }
        </style>
    </head>
    <body>
        <div id="app"></div>
        <script type="text/babel">
            const STATUS_TODO = 'STATUS_TODO';
            const STATUS_DOING = 'STATUS_DOING';
            const STATUS_DONE = 'STATUS_DONE';
            
            const STATUS_CODE = {
                STATUS_TODO: '待处理',
                STATUS_DOING: '进行中',
                STATUS_DONE: '已完成'
            }
            let tasks = [{
                id: 0,
                status: STATUS_TODO,
                title: '每周七天阅读五次，每次阅读完要做100字的读书笔记',
                username: '小夏',
                point: 10
            }, {
                id: 1,
                status: STATUS_TODO,
                title: '每周七天健身4次，每次健身时间需要大于20分钟',
                username: '橘子?',
                point: 5
            }, {
                id: 2,
                status: STATUS_TODO,
                title: '单词*100',
                username: '┑(￣Д ￣)┍',
                point: 2
            }, {
                id: 3,
                status: STATUS_TODO,
                title: '单词*150',
                username: '┑(￣Д ￣)┍',
                point: 2
            }, {
                id: 4,
                status: STATUS_TODO,
                title: '单词*200',
                username: '┑(￣Д ￣)┍',
                point: 2
            }, {
                id: 5,
                status: STATUS_TODO,
                title: '单词*250',
                username: '┑(￣Д ￣)┍',
                point: 2
            }]
            
            class TaskItem extends React.Component {
                handleDragStart = (e) => {
                    this.props.onDragStart(this.props.id);
                }
                render() {
                    let { id, title, point, username, active, onDragEnd } = this.props;
                    return (
                        <div 
                            onDragStart={this.handleDragStart}
                            onDragEnd={onDragEnd}
                            id={`item-${id}`} 
                            className={'item' + (active ? ' active' : '')}
                            draggable="true"
                        >
                            <header className="item-header">
                                <span className="item-header-username">{username}</span>
                                <span className="item-header-point">{point}</span>
                            </header>
                            <main className="item-main">{title}</main>
                        </div>
                    );
                }
            }
            
            class TaskCol extends React.Component {
                state = {
                    in: false
                }
                handleDragEnter = (e) => {
                    e.preventDefault();
                    if (this.props.canDragIn) {
                        this.setState({
                            in: true
                        })
                    }
                }
                handleDragLeave = (e) => {
                    e.preventDefault();
                    if (this.props.canDragIn) {
                        this.setState({
                            in: false
                        })
                    }
                }
                handleDrop = (e) => {
                    e.preventDefault();
                    this.props.dragTo(this.props.status);
                    this.setState({
                        in: false
                    })
                }
                render() {
                    let { status, children } = this.props;
                    return (
                        <div 
                            id={`col-${status}`} 
                            className={'col'}
                            onDragEnter={this.handleDragEnter}
                            onDragLeave={this.handleDragLeave}
                            onDragOver={this.handleDragEnter}
                            onDrop={this.handleDrop}
                            draggable="true"
                        >
                            <header className="col-header">
                                {STATUS_CODE[status]}
                            </header>
                            <main className={'col-main' + (this.state.in ? ' active' : '')}>
                                {children}
                            </main>
                        </div>
                    );
                }
            }
            
            class App extends React.Component {
                state = {
                    tasks: tasks,
                    activeId: null
                }
                /**
                 * 传入被拖拽任务项的 id
                 */
                onDragStart = (id) => {
                    this.setState({
                        activeId: id
                    })
                }
                
                dragTo = (status) => {
                    let { tasks,  activeId} = this.state;
                    let task = tasks[activeId];
                    if (task.status !== status) {
                        task.status = status;
                        this.setState({
                            tasks: tasks
                        })
                    }
                    this.cancelSelect();
                }
                
                cancelSelect = () => {
                    this.setState({
                        activeId: null
                    })
                }
                
                render() {
                    let { tasks, activeId } = this.state;
                    let { onDragStart, onDragEnd, cancelSelect } = this;
                    return (
                        <div className="task-wrapper">
                            {
                                Object.keys(STATUS_CODE).map(status => 
                                    <TaskCol 
                                        status={status} 
                                        key={status} 
                                        dragTo={this.dragTo}
                                        canDragIn={activeId != null && tasks[activeId].status !== status}>
                                        { tasks.filter(t => t.status === status).map(t => 
                                            <TaskItem
                                                key={t.id}
                                                active={t.id === activeId}
                                                id={t.id}
                                                title={t.title} 
                                                point={t.point} 
                                                username={t.username}
                                                onDragStart={onDragStart}
                                                onDragEnd={cancelSelect}
                                            />)
                                        }
                                    </TaskCol>
                                )
                            }
                        </div>
                    )
                }
            }
            
            ReactDOM.render(
                <App />,
                document.getElementById('app')
            );
        </script>
    </body>
</html>

 

qq_19323867
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用react来实现PC端拖拽
weixin_58160355的博客
04-21 983
效果图： tsx: import {useRef,useEffect} from 'react' import './index.less' export default function Drag() { let disX:number=0; let disY:number=0; let x:number=0; let y:number=0; const boxRef=useRef<HTMLDivElement | null>(null); .
(react实现拖拽)自定义hook的练习以及react事件 —— 拖拽实现一
weixin_42192909的博客
09-22 1116
自定义hook的练习以及react事件 —— 拖拽实现一 场景 ​ 对拖拽比较感兴趣，之前也没有接触过，就尝试着自己实现了拖拽的功能，样式效果如下 自定义hook ​ 在获取每个块距离屏幕的位置（用于之后的数据判断）的时候尝试采用了自定义hook来获取数据，代码如下 const useDistanceArr = (dragArrRef: any) => { const [distanceArr,setDistanceArr] = useState<distanceState[]>([
React结合Drag API实现拖拽示例详解
qq_38334677的博客
03-07 1094
拖拽是非常有趣的一种交互，特别是在低代码场景下非常重要。使用原生 API 能够让我们更加了解底层的一些细节，React 社区也有一些优秀的第三方框架，如：react-dragable, react-beautiful-dnd，大家有兴趣不妨再多了解下。
html5拖动监听
weixin_30537391的博客
08-07 924
在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 ondragend - 用户完成元素拖动后触发 释放目标时触发的事件: ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件 ondragover - 当某被...
【react】react项目支持鼠标拖拽的边框改变元素宽度的组件
最新发布
weixin_43726152的博客
06-06 1260
用于创建可让用户手动调整盒子长宽的组件。
react可视化编辑器 第一章 拖拽
Zhooson的博客
03-16 1285
代码测试 ，会有一些偏差，原因是 鼠标拖拽的位置的不是红色div的左上角顶点， 这样的就不会发生偏移， 但是实际情况无法保证每次都是拖拽顶点， 那需要在开始拖拽的计算的鼠标相对于红色div的偏移值。ondragenter - 当被拖动的元素进入放置目标时触发。ondragleave - 当被拖动的元素离开放置目标时触发。ondragover - 当被拖动的元素超过放置目标时触发。ondrop - 当被拖动的元素放在放置目标上时触发。现在需求的 红色拖拽到蓝色中， 这里的方法是定位。
React 实现拖拽
前端博客典中典
11-26 1722
拖拽标题及拖拽表头 antd拖拽标题实现添加功能
React实现组件的拖拽
a253399414的博客
01-09 5434
加粗样式近期接到了一个使antd的Drawer组件可以拖拽的需求，以前没有写过类似的案例，只能去网上搜索解决方案，发现有挺多react的拖拽的组件，但是项目中不允许随便引用组件，只能使用原生HTML的拖拽方案了。下面记录一下学习的心得： 了解HTML的拖拽 注意： 为了让元素可拖动，需要使用 HTML5 draggable 属性。 提示： 链接和图片默认是可拖动的，不需要 draggable 属性。 在拖放的过程中会触发以下事件： 在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖
react-reactdraggableReact可拖拽组件
08-15
在React的世界里，创建交互式的用户界面是一项挑战，但库如`react-draggable`使得实现拖放功能变得轻松易行。`react-draggable`是Mza Briskie开发的一个开源项目，它允许我们将任何React组件转化为可拖动的元素，极...
react-rnd：React一个可调整大小且可拖动的React组件
02-05
一个可调整大小且可拖动的React组件。 目录 屏幕截图 现场演示 故事书 CodeSandbox 安装 使用npm npm i -S react-rnd 用纱 yarn add react-rnd 用法 default示例 Rnd < / Rnd > position和size示例 < ...
react-draggable-master.zip
06-11
三、主要功能实现 1. 事件监听：React Draggable通过监听`onMouseDown`和`onTouchStart`事件开始拖动过程，然后在`onMouseMove`和`onTouchMove`事件中计算新的位置，更新组件的state。 2. 状态管理：组件的`state`...
react 事件1
08-08
9. **鼠标拖拽事件**：如`onDrop`, `onDrag`, `onDragEnd`, `onDragEnter`, `onDragExit`, `onDragLeave`, `onDragOver`, `onDragStart`，它们提供了处理拖放操作的能力。 在React中，事件处理函数接收一个事件对象...
Android-React-native实现的AndroidBottomSheetBehavior效果
08-13
总之，`React-native-bottom-sheet-behavior`库为React Native开发者提供了一种方便的方式来实现类似Android BottomSheetBehavior的功能，使应用在保持原生体验的同时，能够利用JavaScript的灵活性和React Native的...
React实现拖拽效果
Leo_DLi的博客
12-26 857
项目分为 todo-panel, todo-list, todo-item 三个组件1, todo-panel 控制整个 demo 效果的布局和总逻辑的实施, 所有响应式的 state 都在该组件中实现.总控室.所有需要动态渲染的 state 都在当前组件中配置2, todo-list 列表组件, 用于展示某种形态的列表桥梁.子组件(todo-item)的 drag 行为需要通过 todo-list 组件传递给父组件(todo-panel);
前端拖拽事件解析-react实现拖拽效果demo
前端三脚猫的博客
04-26 4642
前言 在平时开发中会有一些涉及到通过拖拽效果完成的业务需求，那么我们就需要了解和学习拖拽相关的知识，在html5中就有原生的拖拽api，下面就来使用这些api实现一个灵活拖拽的demo。 拖拽流程 简单来说完成拖拽一共需要三步： 开始拖拽 -> 拖拽中 -> 结束拖拽。 在这些步骤中又会有许多更细节的步骤需要处理，完整流程如下： 1、设置指定元素为可拖拽元素（使用draggable属性，只有设置了draggable属性，元素才可以被拖动） 2、点击拖拽元素开始进行拖拽并监听拖拽开始事件（设置拖拽
React实现一个拖拽排序组件 - 支持多行多列、支持TypeScript、支持Flip动画、可自定义拖拽区域
m0_64130892的博客
11-05 1576
React实现一个拖拽排序组件 - 支持多行多列、支持TypeScript、支持Flip动画、可自定义拖拽区域
react hook 小球拖拽
阿豪
07-24 164
原文链接: react hook 小球拖拽 上一篇:...
React滑块拖拽（PC端）
weixin_43822237的博客
08-24 262
实现PC端滑块拖拽；要引入三个js库； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src=".
vue3 拖拽组件
风再起时_H的博客
10-28 5097
vue3 拖拽组件 我的结构是这样的 我要在about页面使用这个组件，实现如下： // 可拖拽组件：pc和Mobile function useMove(el: any) { el.style.position = 'fixed'; let offsetX: number, offsetY: number, oL: number, oT: number, oLeft: number, oTop: number; const browser = { versions
react实现echarts 点击放大功能
04-05
要实现echarts的点击放大功能，可以使用echarts提供的事件处理方法。具体实现步骤如下： 1. 在react组件中引入echarts库，并初始化一个echarts实例： ```jsx import React, { useEffect, useRef } from 'react'; import echarts from 'echarts'; function Chart() { const chartRef = useRef(null); useEffect(() => { const chart = echarts.init(chartRef.current); // 在这里配置echarts图表的数据和样式 chart.setOption({...}); }, []); return <div ref={chartRef} style={{ width: '100%', height: '500px' }}></div>; } ``` 2. 给echarts实例绑定click事件处理方法，用于放大缩小： ```jsx useEffect(() => { const chart = echarts.init(chartRef.current); // 在这里配置echarts图表的数据和样式 chart.setOption({...}); chart.on('click', (params) => { const zoom = chart.getOption().dataZoom[0]; const { startValue, endValue } = zoom; const zoomFactor = 0.1; // 缩放因子 if (params.componentType === 'dataZoom') { // 点击在dataZoom组件上，放大 const zoomStart = startValue + (endValue - startValue) * zoomFactor; const zoomEnd = endValue - (endValue - startValue) * zoomFactor; chart.dispatchAction({ type: 'dataZoom', startValue: zoomStart, endValue: zoomEnd, }); } else { // 点击在其他区域，缩小 const zoomStart = startValue - (endValue - startValue) * zoomFactor; const zoomEnd = endValue + (endValue - startValue) * zoomFactor; chart.dispatchAction({ type: 'dataZoom', startValue: Math.max(zoomStart, 0), endValue: Math.min(zoomEnd, 100), }); } }); }, []); ``` 3. 在echarts图表中添加dataZoom组件： ```jsx useEffect(() => { const chart = echarts.init(chartRef.current); // 在这里配置echarts图表的数据和样式 chart.setOption({ ..., dataZoom: [ { type: 'inside', start: 0, end: 100, }, ], }); ... }, []); ``` 这样就可以在echarts图表中实现点击缩放的功能了。点击在dataZoom组件上时放大，点击在其他区域时缩小。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值