拖拽功能（Drag and Drop，简称 DnD）是现代 Web 应用中常见的交互方式之一。React 提供了多种方式来实现拖拽功能，包括原生的 HTML5 Drag and Drop API 和第三方库如 react-dnd。本文将从浅入深地介绍如何在 React 中实现拖拽功能，并通过代码示例来说明常见问题、易错点及如何避免。
1. 原生 HTML5 Drag and Drop API
1
vue-drag-resize是一个支持拖拽与缩放的vue插件特征轻量级，无依赖性所有的操作都是可联动的支持触摸事件定义元素可拖拽，或者可缩放，或者二者兼有提供用于调整大小的操作点与操作框可以按照比例缩放或者不按照比例缩放元素可限制拖拽的最大与最小值、拖拽的范围是否超出其父元素可限制拖动的方向为垂直或水平轴用法：$ npm i -s vue-drag-resize 然后全局引入或者按需引入属性is
转载
2024-02-25 14:51:35
497阅读
一、引言 拖拽上传（Drag & Drop Upload）是一种现代且直观的文件上传方式，它允许用户通过简单的拖拽操作将文件从桌面或文件管理器直接拖入网页中进行上传。在React应用中实现拖拽上传功能
一、引言
拖拽上传（Drag & Drop Upload）是一种现代且直观的文件上传方式，它允许用户通过简单的拖拽操作将文件从桌面或文件管理器直接拖入网页中进行上传。在React应用中实现拖拽上传功能，不仅可以提升用户体验，还能简化文件上传流程。本文将由浅入深地介绍如何构建一个React拖拽上传组件，并探讨常见问题、易错点及解决方案。
二、基础知识
（一）HTML5拖放API
事件
引言
拖拽布局（Drag and Drop Layout）是现代Web应用中常见的交互模式，尤其在可视化编辑器、仪表板和内容管理系统中。React作为流行的前端框架，提供了丰富的工具和库来实现拖拽功能。本文将由浅入深地介绍如何在React中构建拖拽布局组件，探讨常见问题、易错点及解决方案，并通过代码案例进行解释。
一、基础知识与准备工作
1. 拖拽的基本概念
拖拽操作通常包括三个主要阶段：
拖
它是由Atlassian 公司出品。一个关注性能的拖放库，可用于增强前端用户体验。看Pragmatic这个名字的中文含义：“实用主义的” 就显得与众
原创
精选
2024-04-13 21:42:08
483阅读
引言 拖拽布局（Drag and Drop Layout）是现代Web应用中常见的交互模式，尤其在可视化编辑器、仪表板和内容管理系统中。React作为流行的前端框架，提供了丰富的工具和库来实现拖拽功能
dragstart:事件主体是被拖放元素，在开始拖放被拖放元素时触发，。 darg:事件主体是被拖放元素，在正在拖放被拖放元素时触发。 dragenter:事件主体是目标元素，在被拖放元素进入某元素时触发。 dragover:事件主体是目标元素，在被拖放在某元素内移动时触发。 dragleave:事 ...
转载
2021-08-26 11:38:00
141阅读
2评论
最近偶尔知道了锤子的one step，所以在网上看相关的东西，有人说android原生drag drop就能实现，我就去学习一下这个drag drop,下面把学习到的东西总结一下：drag drop 是需要两个或者两个以上的View 实现的。就是将一个View从某一个位置拖放到另一个位置，在拖放过程中必须有两个或两个以上的View参与，一个是被拖的View，另一个或多个是接收被拖View的View
转载
2023-09-26 12:47:25
144阅读
事件分为两类事件： DOM事件，自定义事件一、DOM事件（一）、定义 v-on指令（通常缩写为@符号）来监听Dom事件，触发事件时执行一些JavaScript接收调用的方法名称。单事件<view @cli
mxml文件：
<?xml version="1.0" encoding="utf-8"?> <control:Test5 xmlns:fx="http://ns.adobe.com/mxml/2009" &
原创
2012-10-29 13:05:00
610阅读
1.组件，什么是组件，可以这样理解，一个页面有可能包含很多逻辑，很混乱，当我们将这一大坨东西分为很多个小东西，每一个小东西只完成自己的功能，和其他的小东西互不干涉，页面想要使用，只需要引入就行了。 2.组件的使用可分为三步：一创建组件构造器，二注册组件，三使用组件 3.其实每一个组件就相当于一个vue实例，它也有自己的template,method,data，components这些东西，data
转载
2024-04-03 12:51:40
155阅读
参考vue文件地址：递归组件实现遍历效果递归组件实现思路：遍历数组元素，并判断子元素的子集数量是否大于0。如果子集的集合数量大于0，则需要需要再一次调用该组件。如果子集的集合数量等于0，则直接显示内容。创建组件<!-- subordinate：判断是否为子集递归； activeNames：打开折叠面板的集合。 -->
<van-collapse v-if="!subord
转载
2024-02-29 17:08:53
136阅读
1. 在drag.js文件中添加 /* * 拖拽指令 */ export default { inserted(el) { // 这里的el是标签中的v-drag let positionParams = { x: 20, y: 105, startX: 0, startY: 0, endX: 0, ...
转载
2021-09-01 11:54:00
1177阅读
3评论
value和list这两个都可以给一个draggable注入数据源：/*value注入数据源*/
<draggable v-model="list" ></draggable>
export default {
data() {
return {
list:[{
name:'aaa',id:1,
转载
2024-06-14 15:26:44
521阅读
1.项目初始化安装 Vue 脚手架通过 Vue 脚手架创建项目配置 Vue 路由配置 Element-UI 组件库配置 axios 库初始化 git 远程仓库将本地项目托管到 github 中1.安装 Vue 脚手架npm install vue-cli -g2-3.通过 Vue 脚手架创建项目、配置 Vue 路由vue ui在命令行输入完 vue ui 后会自动打开一个 vue 项目可视化管理页
PS：本文适合熟悉vue以及了解react的同学 由于公司业务使用得是react开发的后台系统（也有vue的项目），对于我这种只写过react demo 的小白菜确实是一个机会，学习一个框架最好的办法就是从业务做起。首先我们要弄清做业务需要什么知识点去支持比如：react 是怎么样传输数据的？react 怎么封装组件？react 的生命周期？。。。。实际上vue熟练的同学们，我觉得转react还是
转载
2023-08-23 15:12:27
200阅读
我们先来总结一下前面已经认识的选项 el：指定Vue实例的挂载点，根实例的特有属性 data：用于声明需要响应式绑定的数据对象 components：Vue实例配置局部注册组件 template：用于挂载元素的字符串模板 render：渲染函数，创建虚拟DOM，是字符串模板的替代方案。现在开始一个例子介绍一下其他常用的选项（options对象的属性）： 下面的代码局部注册了一个组件AgeStati
转载
2024-04-09 13:53:35
434阅读
组件基础 一、组件作用 组件（Component）是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素，封装可重用的代码。
转载
2024-02-28 16:54:13
58阅读
（1）组件名 在注册一个组件的时候，我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了： 该组件名就是 Vue.component 的第一个参数。你给予组件的名字可能依赖于你打算拿它来做什么。当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候，强烈推荐遵循 W3C
转载
2019-03-26 11:44:00
551阅读
2评论
