Drag，js实现鼠标拖拽元素

最新推荐文章于 2022-01-11 15:27:13 发布

原创

最新推荐文章于 2022-01-11 15:27:13 发布 · 4.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #拖拽

本文介绍如何使用原生JavaScript实现PC端元素的拖拽功能。通过记录鼠标按下时的位置，并在鼠标移动时更新元素的top和left样式，使元素跟随鼠标移动。在实现过程中，遇到并解决了通过ID获取style.top值失败以及鼠标移动位移计算错误的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天有个需求，就是实现移动端元素的拖拽功能，自己用原生代码写了一个在PC端通过鼠标进行拖拽的例子，代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>实现拖拽功能</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

季诗筱

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
4
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

利用JS计算出鼠标位置

esqlbejsqw的博客

05-30

444

利用JS计算出鼠标位置开发工具与关键技术：JS 作者：撰写时间：2021/5/28 首先先了解一下JS JS的全称是 JavaScript JavaScript 是世界上最流行的编程语言。这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。 Event 对象 Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！事件句柄　(

JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)

12-10

JavaScript获取鼠标移动时的坐标(兼容:IE8、谷歌、Firefox、Opera )，测试通过直接复制成html文件，即可运行。为方便大家测试特准备了一份在线演示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JavaScript获取鼠标移动时的坐标(兼容:IE8、谷歌、

4 条评论您还未登录，请先登录后发表或查看评论

元素的拖拽属性drag

Listner的博客

02-04

1307

拖拽属性（drag）：是指鼠标点击源对象后，不松手将其拖拽到目标对象或者半途释放的过程（是H5的新属性）源对象：指鼠标点击的内容目标对象：指拖动源对象预计进入的区域源对象可触发的事件： ondragstart 源对象开始被拖动 ondrag 源对象拖拽中（松手时无法读取鼠标的坐标，x,y会变成0，需要添加if判断来选择将其不赋值给元素） ondragend 源对象拖拽结束源对象进...

简单鼠标拖动效果drag

yaoxin524的博客

04-07

210

1、代码没几行，直接粘帖，以后有个参考： [code="html"] 用ondrag事件简单的实现鼠标拖动物件 //Dhtml:用ondrag事件简单的实现鼠标拖动物件. //releaseCapture //函数功能：该函数从当前线程中的窗口释放鼠标捕获，并恢复 //通常的鼠标输入处理。捕获鼠标的窗口接收所有的鼠标输入（无论光标的位置在哪里）， //除非...

javaScript小问题，托拽元素，获得当前鼠标的坐标

datouniao1的博客

08-02

1198

#div1,#div3 { width: 400px; height: 400px; position: absolute; left:400px; top:100px; border:2px solid red; perspective: 0px; 今天希望在#div1上面添加事件 var oDiv1=document.getEl

js实现鼠标拖拽缩放div实例代码

10-17

在本篇文章中，将深入探讨如何使用JavaScript实现鼠标拖拽和缩放一个HTML页面中的DIV元素。这一功能在网页设计中非常实用，因为它可以让用户通过简单的鼠标操作来直接控制页面元素的大小和位置，从而提升交互体验。 ...

js实现拖拽元素选择和删除

10-14

在JavaScript中，实现拖拽元素选择和删除的功能，通常涉及到事件监听、DOM操作以及一些基本的CSS样式调整。以下是一个详细的步骤说明： 1. **创建可拖动元素**: 首先，我们需要一个可以被拖动的元素，例如这里的`....

javascript利用canvas实现鼠标拖拽功能

10-15

本文主要探讨如何利用Canvas实现鼠标拖拽功能，这对于创建交互式Web应用尤其有用。以下我们将详细解析实现这一功能的主要步骤和关键代码。首先，我们需要创建一个`<canvas>`元素，并通过`document.getElementById`...

jQuery使用drag效果实现自由拖拽div

10-24

本文将详细介绍如何利用jQuery实现一个div元素的自由拖拽功能。拖拽技术在前端开发中非常常见，主要用于提升用户界面的交互体验。通过结合jQuery库，开发者可以较为简单地实现复杂的拖拽功能。首先，我们了解实现...

HTML5——drag拖拽

zyz00000000的博客

09-21

1228

1. 给标签元素添加属性：draggable = “true”，该元素即可被拖拽，任何元素都可以被拖拽特点：拖走的是灵魂 2. 事件（1）可拖拽元素的事件 dragstart事件：被拖拽元素，开始被拖拽时触发 dragend事件：被拖拽元素，拖拽完成时触发注意：e.target对象上，是拖拽元素的所有信息，包括属性、方法、对象等。需要了解一下：（2）目标元素事...

拖拽drag.js

08-28

拖拽drag.js

Pc端和移动端拖拽组件jquery.drag.js

老白干的zone

02-08

1万+

移动市场开始火爆以来，网页上的拖拽效果则要做到全兼容则不是一件易事，因此最近把研究成果奉上，供大家使用。

js实现一个可以兼容PC端和移动端的div拖动效果

热门推荐

SweetoDream

12-09

1万+

前段时间写了一个简单的div拖动效果，不料昨天项目上正好需要一个相差不多的需求，就正好用上了，但是在移动端的时候却碰到了问题，拖动时候用到的三个事件：mousedown、mousemove、mouseup在移动端都不起任何作用。毕竟移动端是没有鼠标的，查资料后发现，在移动端与之相对应的分别是：touchstart、touchmove、touchend事件。还有一点要注意的是在PC端获取当前鼠标的坐标

纯JS实现在H5移动端或PC端可拖拽图标

程序员创业中

01-11

1332

<div v-if="showRefresh" draggable="true" id="aaa"> <svg class="refresh-icon" slot="icon" @click="refresh()"> <use xlink:href="#ic_refresh" /> </svg> </div> mounted(){ let aaa = document.getElementById('aaa'); aa.

用鼠标事件实现拖拽

景洪的博客

08-27

5612

首先复习一下鼠标事件：click: 在用户单击主鼠标按钮，或者按下回车键时触发。 mousedown：用户按下任意鼠标按钮时触发，不能通过键盘触发； mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发。 mouseleave：在鼠标光标移动到元素范围之外时触发 mousemove：当鼠标指针在元素内部移动时重复地触发，不能通过键盘事件触发这个事件； mouseout：

js中的拖拽drag

ruler1112的博客

08-26

5460

/** * 拖放事件 * (默认图像,链接,文本是可以拖动的) * (别的元素要拖动首先设置draggable="true":对于draggable的支持ie10+,ie9-只能使用默认拖动) * 1. 被拖放元素拖放事件: * a.dragstart:被拖放的元素开始拖放的时候触发 * b.drag:在拖放过程中持续触犯 * c.dragend:停止

js 插件 drag.js拖动

青梅煮酒论英雄的博客

03-20

3686

1. html 引入drag 2.使用插件 $("#hoverMap").dragging({ move : 'both', scope:".ondetails_div", randomPosition : false , hander:'#twoGis_header' }); 3.使用draggable插件，...

拖拽drag_[JS]面向对象的拖拽实现

weixin_33266645的博客

01-09

341

这文章是我自己的学习记录,若文中有理解有误的地方,请在评论区指出,我再理解一下,更快进步,非常感谢!直接上代码//(我们的每个实例身上已经在down方法中携带了,但是在不同的作用域,需要使用实例对象将其联系起来,因为两者的this都是指向实例化对象的,故this.可以访问mouseToEle) function Drag(ele){ //封装了一个拖拽的构造函数,只要是new构造调用的实...

实现div层鼠标拖拽功能的js插件

其中，使用鼠标拖拽元素是交互性的一个重要组成部分，也是提升用户体验的重要方式之一。在这个场景下，JavaScript (JS) 插件扮演了关键角色。本知识点将详细探讨与“JS插件鼠标拖拽”相关的内容，包括其基本概念、...