React结合Drag API实现拖拽示例详解

目录
  • 认识拖拽
    • 被拖拽元素
    • 可释放目标
    • 生命周期
    • 拖拽操作中的数据传输
  • 代码实现
    • 如何标记当前拖拽的元素？
    • 在画布中拖动
  • 数据结构
  • 总结

认识拖拽

鼠标拖拽是一个常见的交互场景，在这个熟悉的过程将会发生哪些事件？

拖拽事件指用户通过鼠标（或其他指针设备）将元素移到一个新的位置上。拖拽过程涉及两个对象：被拖拽元素（上图中 A ）和可释放目标（上图中 B ）

被拖拽元素

默认情况下，图片、链接和文本是可拖动的。HTML5 在所有 HTML 元素上规定了一个 draggable 属性， 表示元素是否可以拖动。图片和链接的 draggable 属性自动被设置为 true，而其他所有元素此属性的默认值为 false。

某个元素被拖动时，会依次触发以下事件:

  • ondragstart：拖动开始，当鼠标按下并且开始移动鼠标时，触发此事件；整个周期只触发一次；
  • ondrag：只要元素仍被拖拽，就会持续触发此事件；
  • ondragend：拖拽结束，当鼠标松开后，会触发此事件；整个周期只触发一次。

可释放目标

当把拖拽元素移动到一个有效的放置目标时，目标对象会触发以下事件：

  • ondragenter：只要一把拖拽元素移动到目标时，就会触发此事件；
  • ondragover：拖拽元素在目标中拖动时，会持续触发此事件；
  • ondragleave 或 ondrop：拖拽元素离开目标时（没有在目标上放下），会触发ondragleave；当拖拽元素在目标放下（松开鼠标），则触发ondrop事件。

赞 (0)

相关推荐

  • React实现卡片拖拽效果流程详解

    前提摘要: 学习宋一玮 React 新版本 + 函数组件 &Hooks 优先 开篇就是函数组件+Hooks 实现的效果如下: 学到第11篇了 照葫芦画瓢,不过老师在讲解的过程中没有考虑拖拽目标项边界问题,我稍微处理了下这样就实现拖拽流畅了 下面就是主要的代码了,实现拖拽(src/App.js): 核心在于标记当前项,来源项,目标项,并且在拖拽完成时对数据处理,更新每一组数据(useState): /** @jsxImportSource @emotion/react */ // 上面代码是使用e

  • react拖拽组件react-sortable-hoc的使用

    目录 1.文件1 2.文件2 3.使用 使用react-sortable-hoc实现拖拽 如图: 提示:下面案例可供参考 1.文件1 代码如下(示例):文件名称:./dragcomponents import * as React from 'react' import { sortableContainer, sortableElement, sortableHandle, } from "react-sortable-hoc"; // 拖拽的关键组件 const Sortable:

  • react 实现表格列表拖拽排序的示例

    目录 问题描述 思路 解析 1. react-sortable-hoc 2. array-move 问题描述 在项目开发中,遇到这样一个需求:需要对表格里面的数据进行拖拽排序. 效果图如下所示: 思路 安装两个插件: react-sortable-hoc (或者 react-beautiful-dnd) array-move npm install --save react-sortable-hoc npm install --save array-move 解析 1. react-sortab

  • React结合Drag API实现拖拽示例详解

    目录 认识拖拽 被拖拽元素 可释放目标 生命周期 拖拽操作中的数据传输 代码实现 如何标记当前拖拽的元素? 在画布中拖动 数据结构 总结 认识拖拽 鼠标拖拽是一个常见的交互场景,在这个熟悉的过程将会发生哪些事件? 拖拽事件指用户通过鼠标(或其他指针设备)将元素移到一个新的位置上.拖拽过程涉及两个对象:被拖拽元素(上图中 A )和可释放目标(上图中 B ) 被拖拽元素 默认情况下,图片.链接和文本是可拖动的.HTML5 在所有 HTML 元素上规定了一个 draggable 属性, 表示元素是否可

  • react echarts tree树图搜索展开功能示例详解

    目录 前言 最终效果 版本信息 核心功能: 关键思路: 附上代码 数据data.js 功能: TreeUtils 总结: 前言 umi+antd-admin 框架中使用类组件+antd结合echarts完成树图数据展示和搜索展开功能 最终效果 版本信息 "antd": "3.24.2", "umi": "^2.7.7", "echarts": "^4.4.0", "echart

  • Composition API思想封装NProgress示例详解

    目录 正文 安装和基本使用 自己实现一个 正文 最近在用vue3封装一套后台管理模版,自然会用到NProgress.如果你没有用过,你可以看一下instagram,youtube这些网站,它们都有一个顶部加载条,这也是现在最流行的网页加载条. 于是我发现了@vueuse/integrations中的useNProgress,我们先看一下Anthony Fu大神如何去封装的,然后咱们再去试着自己实现一下. 安装和基本使用 npm i nprogress @vueuse/integrations 基

  • Vue Element Sortablejs实现表格列的拖拽案例详解

    1. css:    dragTable.css @charset "UTF-8"; .w-table{ height: 100%; width: 100%; float: left; } /* 拖动过程中,鼠标显示样式 */ .w-table_moving .el-table th .thead-cell{ cursor: move !important; } .w-table_moving .el-table__fixed{ cursor: not-allowed; } .w-ta

  • React Native 中实现确认码组件示例详解

    React Native 中实现确认码组件示例详解

    目录 正文 实现原理 开源方案 正文 确认码控件也是一个较为常见的组件了,乍一看,貌似较难实现,但实则主要是障眼法. 实现原理 上图 CodeInput 组件的 UI 结构如下: <View style={[styles.container]}> <TextInput autoFocus={true} /> <View style={[styles.cover, StyleSheet.absoluteFillObject]} pointerEvents="none&

  • React实现数字滚动组件numbers-scroll的示例详解

    目录 一.设计原理 二.实现方式 三.使用方式 四.参数说明 数字滚动组件,也可以叫数字轮播组件,这个名字一听就是非常普通常见的组件,第一反应就是想找找网上大佬的东西顶礼膜拜一下,这一搜,还真是没找到趁手的╮(╯▽╰)╭. 最近接了大屏的需求,数字滚动肯定是免不了的,所以开始撸袖子,造轮子了( numbers-scroll ). 首先给大家看下轮子的效果吧: 一.设计原理 如果要做到数字滚动效果,就一定要让数字有从下往上移动的感觉.如果只是纯粹的数字变化,显示出来的效果就会比较普通了,没有什么视

  • C#组件FormDragger窗体拖拽器详解

    C#组件FormDragger窗体拖拽器详解

    适用:.net2.0+ winform项目 介绍: 类似QQ.迅雷等讲究UI体验的软件,都支持在窗口内多处地方拖动窗口,而不必老实巴交的去顶部标题栏拖,这个组件就是让winform也能这样随性拖拽,随性度或更甚.先看效果: 可拖拽的地方包括不限于: 窗体.Panel.GroupBox.TabControl等容器控件的空白区: 菜单栏.工具栏.状态栏等bar的空白区,以及无效项目: Label.PictureBox.ProgressBar等通常不与鼠标交互的控件: 一切无效控件(Enabled为f

  • JavaScript使用面向对象实现的拖拽功能详解

    本文实例讲述了JavaScript使用面向对象实现的拖拽功能.分享给大家供大家参考,具体如下: 面向对象有个前提: 前提:所有东西都必须包含在onload里 改写:不能有函数嵌套,可以有全局变量 过程,如下 onload改成构造函数, 全局变量改成属性(通过this) 函数改写成方法 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/

  • JavaScript鼠标拖拽事件详解

    本文实例为大家分享了js鼠标拖拽事件的详细实现代码,供大家参考,具体内容如下 图片如下: css代码 <style> *{ margin:0; padding:0; } #box{ width: 200px; height: 200px; background: url("./img/aio.png") no-repeat; background-size: cover; position: absolute;/*定位元素 父级元素window就是初始包含块*/ top:0

  • Java API操作Hdfs的示例详解

    目录 1.遍历当前目录下所有文件与文件夹 2.遍历所有文件 3.创建文件夹 4.删除文件夹 5.上传文件 6.下载文件 1.遍历当前目录下所有文件与文件夹 可以使用listStatus方法实现上述需求.listStatus方法签名如下 /** * List the statuses of the files/directories in the given path if the path is * a directory. * * @param f given path * @return t

随机推荐