- 综合排序
- 最热优先
- 最新优先
- JavaScript DOM 布局属性（如 offsetHeight），提前缓存六、何时使用 HTML5 Drag API？ 总结 场景推荐方案表格行/列排序、看板卡片移动✅ mousedown + mousemove 自定义拖拽文件上传、跨应用拖拽⚠️ HTML5 Drag & Drop API复杂物理效果（来自专栏前端 TS/JS 核心讲堂
js拖拽-javascript拖拽缩放示例
本文将系统讲解 原生 JavaScript 实现拖拽功能的核心原理、完整代码示例、常见问题及高级技巧。 一、两种主流实现方式方式 1：使用 HTML5 原生 Drag & Drop API（推荐用于跨容器拖拽）✅ 标准化，浏览器原生支持✅ 支持文件拖入、跨 iframe 拖拽❌ 事件模型复杂，样式控制受限 move; position: absolute; top: 100px; left: 100px; ">
14521编辑于 2026-04-01
JavaScript进阶之实现拖拽
之前我们来实现原生拖拽 原生实现拖拽 Mouse事件实现拖拽 在h5之前，原生实现拖拽是根据Mouse事件来实现的，需要用到以下这三个事件mousedown,mouseup,mousemove mousedown JavaScript三大家族 ? ? 明白了上述?三个事件方法的作用以及JavaScript三大家族，我们来实现个简单版的拖拽 <! drag: 拖拽源 drop：拖拽源最终放置的目标 DataTransfer 对象：退拽对象用来传递的媒介，使用一般为Event.dataTransfer。 ，此事件作用在目标元素上 ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上 ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上 参考:MDN HTML5 drag & drop 拖拽与拖放简介
原生JavaScript拖拽代码示例
其中，通过拖拽直接交换单元格内容是一种直观、高效的操作方式，广泛应用于课程表编排、任务看板、配置管理等场景。 本文将详细介绍如何使用 纯原生 JavaScript（无任何框架依赖） 实现一个支持单元格拖拽交换的 HTML 表格，并提供完整可运行的源代码。 一、核心设计思路本方案摒弃了复杂的 HTML5 Drag and Drop API，转而采用更可控、兼容性更强的 鼠标事件模拟拖拽 方式，主要包含以下关键组件：主表格：标准
| 单元格均可拖动；拖影层（Helper Layer）：一个绝对定位的 ，作为被拖单元格的视觉副本，跟随鼠标移动；状态管理：记录当前拖拽源、原始内容、偏移量及目标单元格；视觉反馈：拖拽源高亮为淡紫色 ，禁止拖拽冻结区域；移动端适配：补充 touchstart/touchmove/touchend 事件。 11721编辑于 2026-04-01 来自专栏彭湖湾的编程世界 【javascript】谈谈HTML5: Web-Worker、canvas、indexedDB、拖拽事件为什么学习HTML5？ 咳咳， 回到主题，为什么我们要学HTML5呢？ 1.了解HTML5的囊括范围的一大好处是：当你不小心使用了一个H5的东东的时候（例如你试图通过百度找到的答案解决一个紧张的需求），你会很及时的关注它的兼容性 2.H5有些新增的特性也许你从没接触过，也感觉无需用到它 如何使得被拖拽元素可拖拽？（因为元素默认的行为是不可拖拽的），以及如何使得被放置的容器元素可放置？ appendChild之类的API实现添加被拖拽的元素，从而模拟整个拖拽的过程 也就是说， 拖拽其实可分为三个过程： 拖动—传递被拖动元素的数据（如id）—在容器元素中添加该元素 关键在于如何在被拖动元素和被放置元素中传递数据 拖拽后 ? 参考资料： HTML5-MDN https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5 【完】 3.5K30发布于 2018-07-31 来自专栏彭湖湾的编程世界 【javascript】谈谈HTML5—Web Worker+canvas+indexedDB+拖拽事件为什么学习HTML5？ 咳咳， 回到主题，为什么我们要学HTML5呢？ 1.了解HTML5的囊括范围的一大好处是：当你不小心使用了一个H5的东东的时候（例如你试图通过百度找到的答案解决一个紧张的需求），你会很及时的关注它的兼容性 2.H5有些新增的特性也许你从没接触过，也感觉无需用到它 如何使得被拖拽元素可拖拽？（因为元素默认的行为是不可拖拽的），以及如何使得被放置的容器元素可放置？ appendChild之类的API实现添加被拖拽的元素，从而模拟整个拖拽的过程 也就是说， 拖拽其实可分为三个过程： 拖动—传递被拖动元素的数据（如id）—在容器元素中添加该元素 关键在于如何在被拖动元素和被放置元素中传递数据 拖拽后 ? 参考资料： HTML5-MDN https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5 【完】 ? 4.2K100发布于 2018-01-03 来自专栏踏浪的文章 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 来自专栏lonelydawn的前端猿区 秒懂 javascript 拖拽上传文件100%; box-sizing: border-box; padding: 12px; border: 3px dashed #F8BBD0; border-radius: 5px 1.8K70发布于 2018-03-29 来自专栏梦魇小栈 使用 JavaScript 实现简单的拖拽步骤 使用 JavaScript 实现拖拽的步骤： 让元素捕获事件（mousedown, mousemove & mouseup） 单击并不释放，触发 mousedown，标记开始拖拽，并获取元素和鼠标的位置 拖动鼠标，触发 mousemove，不断的获取鼠标的位置，并通过计算重新确定元素的位置 释放师表，触发 mouseup，结束拖拽，确定元素位置并更新 被拖拽的元素必须是相对父元素定位，或者是绝对定位 拖拽再快都不会超出 document 的范围。 mouseup 拖拽结束，取消拖拽的标记。使其触发 mousemove 事件，但不做任何处理。 function up(e) { dragging = false; } 在线演示 总结 上面使用的简单的 JavaScript 代码实现了元素的拖拽，但并没有对兼容性问题全面考虑，也没有对性能优化 2K40发布于 2018-10-31 来自专栏xinxin的随笔记录 【javaScript案例】之鼠标拖拽效果这次的效果图如下： 拖拽.gif 我认为这个实验的难点是保持盒子和鼠标的相对位置不变，通过鼠标按下和移动来实现拖拽的效果 如何实现拖拽的效果呢？ 1.7K30编辑于 2022-03-29 来自专栏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('简单拖拽例子 87250发布于 2019-07-05 来自专栏acoolgiser_zhuanlan JavaScript 鼠标拖拽div 改变其大小转自： http://www.cnblogs.com/yushang/archive/2013/03/19/2968782.html 想让div实现拖拽改变大小功能，类似于soso地图（即现在的腾讯地图 ）的看街景时地图可以拖拽等功能 ? background-position: 0px 0px;"> 2.5K30发布于 2019-01-17 来自专栏岳泽以博客 JavaScript案例：弹出登录框拖拽模态框案例分析 点击弹出层，模态框和遮挡层就会显示出来display:block; 点击关闭按钮，模态框和遮挡层就会隐藏起来display:none; 在页面中拖拽的原理：鼠标按下并且移动，之后松开鼠标 鼠标松开，就停止拖拽，就是可以让鼠标移动事件解除。 代码 <! dd, div, p, span, h1, h2, h3, h4, h5, height: 35px; width: 350px; border: #ebebeb 1px solid; text-indent: 5px 0.88); } </style> </head> <body>
<a id="link" href="<em>javascript</em> 5K10编辑于 2022-10-26 来自专栏前端开发随笔 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）元素，然后释放鼠标 " class="tarDiv" draggable="true">4 5< /div>
<script type="text/<em>javascript</em>">
var tarDiv4K30发布于 2018-12-05 来自专栏代码小睿 HTML5 拖拽上传图片实例因为标题写的是实例，所以本次就不做讲解了，因为这个实例我也算是东拼西凑整出来的，参考了大概5、6款拖拽上传的插件和demo，然后把其中好的地方挑出来，最后就成了这么一个实例，一起来看下吧（地址不能保证长久有效 dropupload.html 界面样式我是参考了一个国外的相册网站，改动不大，只是把鸟语转换成中文，以及上传时的样式也进行了改动，之所以选这个的原因就是，我很容易做扩展，它支持3种方式添加图片，一种拖拽上传 它很巧妙的把三种上传模式整合到了一起，而且你可以用IE浏览器浏览下，如果不支持HTML5，是没有拖拽上传图片的提示的，如图： 拖拽上传最重要的就是js部分的代码，它实现了70%的功能，另外30%仅仅是把图片信息提交到后台 获取文件列表 var fileList = e.dataTransfer.files; var img = document.createElement('img'); //检测是否是拖拽文件到页面的操作 主要实现代码是从“功能实现”开始的，这块具体为何这样操作，原理是什么，我就不多说了，大家可以参考下这篇文章：《人人网首页拖拽上传详解(HTML5 Drag&Drop、FileReader API、formdata 3.5K30编辑于 2022-03-23 来自专栏帅哥哥写代码 基于h5+ angularjs页面拖拽实现背景
一个朋友想做一个页面拖拽功能，我去百度一哈，找到一些资料。但是看了半天没看明白。感觉写的比较麻烦。我就反手百度h5拖放，发现h5已经提供一些拖放事件，于是自己反手写了一个。 正题
1.h5提供的拖放事件
设置元素为可拖放
首先，为了使元素可拖动，把 draggable 属性设置为 true ：
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 来自专栏lonelydawn的前端猿区 javascript对dom节点拖拽的简单实现（drag特性）dotted #999; } #img{ margin-left: 10px; margin-top: 0px; } </style> <script type="text/<em>javascript</em> 1.7K80发布于 2018-02-09 腾讯云开发者 Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 |
