搜索 - 腾讯云开发者社区-腾讯云

文章/答案/技术大牛

发布

来自专栏踏浪的文章
HTML5拖拽
@(HTML5)[HTML 5拖拽] HTML 5 拖拽事件图片自带拖拽功能其他元素可设置draggable属性：draggable ：true 拖拽元素(被拖拽的元素)事件 : ondragstart : 拖拽的一瞬间触发 ondrag : 拖拽前、拖拽结束之间，连续触发 ondragend : 拖拽结束触发目标元素(拖拽元素被拖到的地方)事件 : ondragenter > drag -> dragenter -> dragover -> dragleave -> drop -> dragend 火狐下的兼容火狐浏览器下需设置dataTransfer对象才可以拖拽除图片外的其他标签 , link, linkMove, move, all 和 uninitialized) setDragImage ：三个参数（指定的元素，坐标X，坐标Y） files：获取外部拖拽的文件
4.4K10发布于 2019-07-31
来自专栏eadela
HTML5-拖拽
float: left; } p{ background-color: orange; margin-top: 5px --在h5中，如果想拖拽元素，就必须为元素添加draggable="true". float: left; } p{ background-color: orange; margin-top: 5px --在h5中，如果想拖拽元素，就必须为元素添加draggable="true". =0.5; e.target.parentNode.style.borderWidth="5px"; obj= e.target; /*通过dataTransfer
1.2K20发布于 2019-09-29
来自专栏码农的生活
JS实现拖拽代码
////html的代码说明： ////定义了一个table，用于测试js拖拽功能 <html> <head> <script type="text/javascript 2</td></tr> <tr><td>3</td></tr> </table> <tr> <td> </tr> </table> </pre> ////js<em>代码</em>说明： ////currentMoveObj ：全局对象，记录当前<em>拖拽</em>的那个对象 ////var relLeft;：鼠标按下时的横坐标 ////var relTop;鼠标按下时的纵坐标 currentMoveObj.style.pixelLeft; relTop = event.y - currentMoveObj.style.pixelTop; } /////当鼠标松开时，当前<em>拖拽</em>对象置空，始终更新当前<em>拖拽</em>对象的坐标即可 function mouseMove() { if(null !
9.8K00发布于 2021-09-23
来自专栏sktj
python pyqt5 拖拽
例子常用 -- coding: utf-8 -- ''' 【简介】 PyQt5中 Drag and Drop 例子 ''' import sys from PyQt5.QtCore import * from PyQt5.QtGui import * from PyQt5.QtWidgets import * class Combo(QComboBox): def __init__(self , self).init() self.initUI() def initUI(self): lo = QFormLayout() lo.addRow(QLabel("请把左边的文本拖拽到右边的下拉菜单中 = Combo("Button", self) lo.addRow(edit, com) self.setLayout(lo) self.setWindowTitle('简单拖拽例子
87350发布于 2019-07-05
来自专栏web全栈
VisualDrag低代码拖拽模板
背景接到一个需求做一个拖拽模板低代码生成界面（如上图），就是可以自定义界面元素拖拽生成页面，该页面需要可以存储，并且一比一还原。因此得研究实现一个拖拽生成低代码平台，通过查询了各种资料，找到了以下比较合适的开源的低代码平台： visual-drag-demo：https://github.com/woai3c/visual-drag-demo 低代码数据可视化：https://www.mtruning.club/ 鲁班H5：https://ly525.gitee.io/luban-h5/zh/ quark-h5: https://github.com /huangwei9527/quark-h5 根据自己的需求，选择了visual-drag-demo为模板进行了二开。删除组件、调整图层层级放大缩小撤消、重做组件属性设置吸附预览、保存代码绑定事件绑定动画拖拽旋转复制粘贴剪切多个组件的组合和拆分锁定组件网格线可以参考原作者大大的文档：可视化拖拽组件库一些技术要点原理分析
2.1K20编辑于 2022-11-22

来自专栏前端 TS/JS 核心讲堂

原生JavaScript拖拽代码示例

本文将详细介绍如何使用纯原生 JavaScript（无任何框架依赖）实现一个支持单元格拖拽交换的 HTML 表格，并提供完整可运行的源代码。一、核心设计思路本方案摒弃了复杂的 HTML5 Drag and Drop API，转而采用更可控、兼容性更强的鼠标事件模拟拖拽方式，主要包含以下关键组件：主表格：标准

结构，所有三、完整源代码以下为可直接运行的完整 HTML 文件，包含样式、结构与逻辑：<! 请大家引用时保留这段作者声明，此代码为开源代码；使用不受限制，欢迎大家采用本人所写JS动态拖动表格实现代码。五、结语本实现以极简代码达成直观的拖拽交换体验，体现了原生 Web 技术的强大能力。它不仅适用于教学演示，也可作为企业级应用的基础模块。

11721编辑于 2026-04-01

来自专栏前端开发随笔

Vue实现pcH5弹窗拖拽

content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>pc拖拽 e) { document.onmousemove = null } } }) </script> </html> H5 content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>H5拖拽

1.5K30发布于 2020-09-02

来自专栏前端菜鸟变老鸟

彻底搞懂拖拽——基于鼠标事件的拖拽以及基于HTML5 API的拖拽完整实现

解决方案只需要实时计算拖拽的元素边框距离上下左右屏幕之间的距离就行了，具体代码如下： code： <! 至此使用鼠标事件的拖拽大功告成！ ---- 二、基于HTML5拖拽API的拖拽前序知识介绍一个典型的拖拽操作是这样的：用户用鼠标选中一个可拖动的（draggable）元素，移动鼠标到一个可放置的（droppable）元素，然后释放鼠标 ---- 具体实现代码 code： <! " class="tarDiv" draggable="true">4

4K30发布于 2018-12-05

来自专栏代码小睿

HTML5 拖拽上传图片实例

　　因为标题写的是实例，所以本次就不做讲解了，因为这个实例我也算是东拼西凑整出来的，参考了大概5、6款拖拽上传的插件和demo，然后把其中好的地方挑出来，最后就成了这么一个实例，一起来看下吧（地址不能保证长久有效它很巧妙的把三种上传模式整合到了一起，而且你可以用IE浏览器浏览下，如果不支持HTML5，是没有拖拽上传图片的提示的，如图：　　拖拽上传最重要的就是js部分的代码，它实现了70%的功能，另外30%仅仅是把图片信息提交到后台所以先来看下js实现代码吧。主要实现代码是从“功能实现”开始的，这块具体为何这样操作，原理是什么，我就不多说了，大家可以参考下这篇文章：《人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata 最后就是上传部分的PHP代码了，这里我只是提供个参考，你可以根据项目的需求来自己编写。

3.5K30编辑于 2022-03-23

来自专栏帅哥哥写代码

基于h5+ angularjs页面拖拽实现

背景一个朋友想做一个页面拖拽功能，我去百度一哈，找到一些资料。但是看了半天没看明白。感觉写的比较麻烦。我就反手百度h5拖放，发现h5已经提供一些拖放事件，于是自己反手写了一个。正题 1.h5提供的拖放事件设置元素为可拖放首先，为了使元素可拖动，把 draggable 属性设置为 true ：拖动什么 - ondragstart var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } 代码解释我只是一张图片只需要如下一丁点代码就可以实现： <div id="div1" ondrop="drop(event,this)" ondragover="allowDrop(event)" 1,src:'image/0.jpg'},{id:2,src:'image/2.jpg'},{id:3,src:'image/3.jpg'},{id:4,src:'image/4.jpg'},{id:5,

2K20发布于 2019-04-16

来自专栏前端二次元

HTML5、JS实现元素拖拽排序

先介绍一下html5的drag属性,拖放（Drag 和 drop）是 HTML5 标准的组成部分。下面是代码实例：<!

1.5K60编辑于 2023-11-16

来自专栏Article

html5 drag API 实现列表拖拽

抛开兼容性，HTML5 提供的一系列 API 可以简化很多代码量。 ul> function addDnDHandlers(elem) { elem.addEventListener('dragstart', handleDragStart, false); //拖拽元素开始被拖拽的时候触发的事件 ('dragend', handleDragEnd, false); //当拖拽完成后触发的事件，此事件作用在被拖曳元素上 } var cols = document.querySelectorAll ，利用拖拽事件添加class 并设置css就能有“响应”式的效果。拖拽释放，进行html的替换。 function handleDrop(e) { // this/e.target is current target element.

1.5K10编辑于 2022-06-14

来自专栏前端达人

手写原生代码专题 | 图片拖拽效果（一）

二、图片拖拽效果介绍本篇文章，如下视频所示，界面有5个方格拖放区域，我们可以在这些区域里拖拽图片，当鼠标拖动图片时，图片周围有灰色的粗边框效果提示用户当前元素可拖动，在可放置图片的目标方格会出现白色的虚线边框并且背景色更改为黑色三、拖拽相关知识复习在练习前，我们先复习下和拖拽相关的几个API事件，在某个元素被拖动时，会按照顺序触发以下事件： dragstart（按住鼠标不放，刚开始拖动元素时，就会触发 dragstart 事件 1、编写HTML代码 html代码文件比较简单，我们依次创建5个div方格，并将被拖动的图片元素容器初始化放置在第一个方格内，并在元素上添加可拖动属性 draggable 值为 true，表示此元素可被拖动（可调用拖拽API），示例代码如下： <divclass="empty"> <divclass="fill"draggable="true">

<divclass=" ，有了这些基础后，我们就有了写出更复杂<em>拖拽</em>应用的基础。

2.7K30发布于 2021-06-16

来自专栏低代码（low code）专栏

这款拖拽式低代码开发平台，真香！

低代码开发平台相较于传统软件开发，它的优点可以总结为“3低4快”，“3低”是指成本低、使用门槛低、风险低，“4快”是指沟通快、实施快、上线快、变更响应快。这也是低代码最让业界感到意外的地方。今天推荐一款功能强大，能力边界广，而且能满足各类业务场景需求的低代码开发工具——织信Informat。这是一款新奇、实用、高效的企业级低代码开发工具，支持企业按需定制化构建各类信息管理系统，并且能对接外部系统和软硬件设备、支持可视化大屏展示。、织信架构织信Informat的定位是企业级低代码开发平台，目标是构建各种企业级信息管理系统，例如ERP、CRM、MES、PLM、项目管理、OA等系统。部署逻辑图系统组件清单组件类型描述账号数据库pgsql 13版本以上存储账号等公用数据低代码数据库pgsql 13版本以上存储低代码应用数据，支持分布式部署代理服务器nginx负载均衡服务器存储服务器

1.1K20编辑于 2023-08-04

来自专栏大前端（横向跨端 & 纵向全栈）

H5新特性拖拽更换图片

运用H5新特性拖拽API实现一个拖拽更换图片的效果。实现效果如下：代码实现如下： <! DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>H5新特性拖拽更换图片</title> img src="images/p3.png" id="p3">

90110发布于 2020-11-26

来自专栏Golang语言社区

【Golang语言社区】h5 实现图片拖拽

300px; height:200px; background:#d4efdf; border-radius:10px; border:5px

762100发布于 2018-03-27

来自专栏React可视化

React可视化拖拽组件编辑代码生成

mobile.png pc.png 特性：任意拖拽嵌套：通过组件预览面板拖拽组件，到设计面板实现任意嵌套，设计面板中的组件也可随意拖拽嵌套实时预览：设计面板中会实时展示组件的属性效果和样式效果，通过样式配置面板修改样式，实时在页面中显示样式效果模板功能：可以选中局部或者整个页面做为可复用的模板，提高页面配置效率减少重复工作组件约束：根据组件特性配置组件约束，减少组件间的错误嵌套和报错预览与代码生成：可随时预览页面的真实效果，和页面的jsx代码与样式代码多平台支持：支持PC与移动端多型号设配切换展示组件库替换：通过简单的配置可以对接任何React组件库 github地址在线预览

3.9K30发布于 2020-02-27

来自专栏前端 TS/JS 核心讲堂

js拖拽-javascript拖拽缩放示例

本文将系统讲解原生 JavaScript 实现拖拽功能的核心原理、完整代码示例、常见问题及高级技巧。一、两种主流实现方式方式 1：使用 HTML5 原生 Drag & Drop API（推荐用于跨容器拖拽）✅ 标准化，浏览器原生支持✅ 支持文件拖入、跨 iframe 拖拽❌ 事件模型复杂，样式控制受限 body { margin: 0; padding: 20px; font-family: Arial, sans-serif; background: #f5f7fa DOM 布局属性（如 offsetHeight），提前缓存六、何时使用 HTML5 Drag API？总结场景推荐方案表格行/列排序、看板卡片移动✅ mousedown + mousemove 自定义拖拽文件上传、跨应用拖拽⚠️ HTML5 Drag & Drop API复杂物理效果（

14521编辑于 2026-04-01

这款AI低代码平台火了：拖拽生成应用，一键输出WebH5UniApp

它让开发者（甚至非技术人员）能够通过可视化拖拽和 AI 对话的方式，快速构建跨平台应用。最让人惊艳的是，它可以直接输出 Web、H5 和 UniApp 三端的独立项目代码——真正的“一次设计，多端交付”。它的核心亮点可以概括为三个关键词：可视化设计：拖拽式搭建页面，所见即所得AI 辅助生成：对话式生成代码和 DSL（领域特定语言）多平台输出：一键生成 Web、H5、UniApp 项目整个平台基于 Vue 代码生成管道可以将存储的 DSL 转换为独立的 Vue 项目，支持三个目标平台：Web：标准 Web 应用H5：移动端 Web 应用UniApp：跨平台原生应用（可编译到 iOS、Android 等）每个平台都有对应的脚手架模板 5. 打包模板在生成项目代码前，需要先打包模板：node scripts/template.mjs这个脚本会将 templates/ 目录压缩并放置到 backend/zip/ 中。6.

62810编辑于 2026-03-31

拖拽RecyclerView

挥别第三方库：原生ItemTouchHelper掌控RecyclerView拖拽与侧滑原始译文参考：开发技术前线（原作者：PaulBurke/译者：objectlife）如果你还在使用残破累赘的第三方库（比如早期的SwipeToDismiss）或者深陷于手写GestureDetector和onInterceptTouchEvent的泥沼来处理列表的侧滑删除和长按拖拽，那你需要立刻停下。本文将展示如何用极简的代码在RecyclerView中解封这项强悍能力。[! 不仅仅是手势的剥离，它直接掌控了拖拽中悬浮视图的z-轴阴影（elevation抬升）、回位动画轨迹（dropsettling）甚至支持自定义约束方向。这也引申出了极度严苛的代码规范：你的数据模型更新（mItems的维护）必须与notifyItemXXX保持绝对的一致且原子级同步！

5610编辑于 2026-04-25

第 2 页第 3 页第 4 页第 5 页第 6 页第 7 页第 8 页第 9 页第 10 页第 11 页

点击加载更多

HTML5拖拽

HTML5-拖拽

JS实现拖拽代码

python pyqt5 拖拽

VisualDrag低代码拖拽模板