js事件 —— 如何实现点击拖拽功能

最新推荐文章于 2022-09-05 01:06:43 发布
最新推荐文章于 2022-09-05 01:06:43 发布
阅读量400 收藏 1
点赞数 1
分类专栏： js基础 文章标签： js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48009560/article/details/115544565
版权
本文介绍了如何利用JavaScript实现元素的点击拖拽功能，通过示例代码详细讲解了实现过程，帮助读者理解事件监听和鼠标坐标处理的核心逻辑。
摘要由CSDN通过智能技术生成

js如何实现点击拖拽功能？
话不多说直接上代码，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
   
				margin: 0;
				padding: 0;
			}
			.b {
   
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.5);
				position: absolute;
				top: 0;
				left: 0;
				display: none;
			}
			.c {
   
				width: 300px;
				height: 300px;
				display: flex;
				flex-direction: column;
				background-color: white;
				padding: 20px;
				position: fixed;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
			p:nth-of-type(1) {
   
				display: flex;
				width: 100%;
			}
			.l {
   
				cursor: move;
			}
			tr{
   
				background-color: #0099CC;
最低0.47元/天 解锁文章
风中摇曳的裤衩哥
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js实现拖拽事件
m0_72527416的博客
12-22 319
然后，我们要给被拖动元素（也就是在上述的 标签上），设置一个 draggable 属性，此属性用于规定元素是否可拖动，当属性值为 true 时表示元素可拖动，为 false 表示元素不可拖动。要实现这个步骤，需要在放置拖动元素的容器上绑定一个 ondragover 事件，这个事件用于规定在何处放置被拖动的数据。需要在元素容器上绑定一个 ondrop 事件，如下所示，这个事件会在拖动过程中释放鼠标键时触发。拖放是由拖动与释放两部分组成，拖放事件也分为被拖动元素的相关事件，和容器的相关事件。
js 点击拖动
mrzhangdulin的博客
02-02 550
点击拖动 (function(){ var transform = getTransform(); function Drag(selector){ this.elem = typeof selector == ‘object’ ? selector : document.querySelector(selector); this.startX = 0; ...
js事件实现拖拽效果
qq_40137639的博客
07-13 88
js事件实现拖拽效果 <!DOCTYPE html> <html> <head> <title>拖拽效果</title> <meta charset="utf-8"> <style type="text/css"> #wrap{ position: absolute; width: 200px; height: 200px; background-color: red; } </
js事件中的拖拽
szydqq的博客
07-15 885
js事件的拖拽
用js实现拖拽功能
07-14 77
平常我们在网上可以看到，按住一张图片，然后拖到另一处去，前天在网上看石川(Blue)老师 的js课堂，有见过这个，写下来与大家分享一下： 1，先画个div小红块，样式设置如下： #div1{width:200px;height:200px;background-color:red...
基于 Immutable.js 实现撤销重做功能的实例代码
10-18
本文将探讨如何使用 Immutable.js 这个强大的数据不可变库来实现撤销重做功能。Immutable.js 使得状态管理更加简单，因为它确保了数据一旦创建就不会被改变，从而简化了撤销和重做的逻辑。 首先，我们需要确定哪些...
网页模板——javascript 鼠标拖动商品图片添加到购物车的功能实例.zip
11-22
"网页模板——javascript 鼠标拖动商品图片添加到购物车的功能实例"是一个典型的电商网站功能，它利用JavaScript技术实现了用户可以方便地通过鼠标拖拽商品图片直接添加到购物车的操作。这个功能极大地提升了用户的...
利用JavaScript实现图片标注——SearchMapIdentityTask
03-01
`SearchMapIdentityTask`可能是一个自定义的JavaScript类，用于实现对地图上特定区域进行标注的功能。这个功能可以帮助用户在地图上查找、识别和标记特定的地理位置或对象，比如建筑物、道路、兴趣点等。 首先，...
js实现图片放大和拖拽特效代码分享
11-23
js实现图片放大和拖拽特效是一款非常实用的js特效，实现了图片的放大和拖拽功能，没用用到jquery插件，是用原生javascript实现的，除了点击放大和缩小按钮来控制图片的放大缩小，还可以使用鼠标的滚轮控制图片的缩放...
JS组件Bootstrap Table表格多行拖拽效果实现代码
10-23
2. 前言与需求分析：作者首先提到了实现单行拖拽的先前经验，并在基础上提出了新的需求——实现多行拖拽功能。作者分析并考虑了将选中的行放入div容器中注册拖拽的方法，但很快否决了该方案，因为这样会打乱表格的...
DIV 点击拖动，纯JS 实现。
qq_32214375的博客
09-05 2169
   由于公司需要，需要制作了一个div拖动的功能，经过各种百度后终于完成了，记录一下操作步骤，也希望给大家带来一些便捷。    首先我先描述一下我做的功能要达到的效果，其实就是制作一个在线编辑电子证书模板的功能，用户可以自己的添加各种文本，图片，印章，而且可以随意的在模板上拖动。    由于是多个div 可以随意拖动，所以把拖动的代码都封装成了一个方法。   2.创建最外层的一个固定...
JavaScript实现鼠标点击拖拽移动
laoli360的博客
09-11 2582
1.CSS首先用通配符清内外边距 然后给自己需要用的盒子加上背景图片及脱标 * { margin: 0; padding: 0; } div { width: 200px; height: 200px; background: url(./images/dog.jpg) round; position: absolute; left: 0;
js拖动（点击+移动）
qq_42275455的博客
09-08 4855
双层函数：点击事件+鼠标移动事件 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; #bar{
js处理拖拽事件与点击事件并存
素描本里的男子的博客
11-28 2963
解决思路： 1.记录下鼠标按下mousedown和鼠标抬起mouseup的时候当前的pageX和pageY 2.通过开方将两个位置坐标进行对比，当值等于0或者小于7的时候证明当前是点击事件，反之则是拖拽事件 3.关于原本的点击事件函数里的逻辑，现在写到判断语句里就可以了 案例附上： <!DOCTYPE html> <html> <head> <meta...
js实现拖拽功能
m0_64415782的博客
09-05 819
js实现拖拽功能
js实现拖拽效果
本杰明的博客
02-28 7911
写在前面鼠标拖拽效果常见于用户自定义展示页面，比如qq空间，x宝店铺装修等，操作灵动，所见即所得；或者是一个简单modal移动效果，方便用户查看原网页的内容。正好周末抽时间可以实现下，动手做做笔记，方便日后翻阅。 简单拖动星星之火可以燎原，我们先从最简单的需求最起。主要分为三个步骤： 鼠标按下，获取鼠标点击时在div中的相对位置。 鼠标移动，元素的位置 = 就是鼠标的位置 - 刚才的差值。 鼠标放开
js原生拖拽事件（HTML5的拖放 API）
热门推荐
12-22 3万+
在HTML5之前，如果要实现拖放效果，一般会使用mousedown、mousemove和mouseup三个事件进行组合来模拟出拖拽效果，比较麻烦。而HTML5规范实现了原生拖放功能，使得元素拖放的实现更加方便和高效。 默认情况下，图像、链接和文本是可以拖动的。文本只有在被选中的情况下才能拖动，而图像和链接在任何时候都可以拖动。 HTML5为所有的HTML元素规定了一个draggable属性，表
html & js 实现拖动效果
博客
02-14 6447
前言 在日常开发中，前端中常会使用到拖动的效果，今天就来好好的讲解一下，使用javascript和html实现拖动的效果。 需求分析 要实现的效果很简单，如下图中，我们在蓝色区域内拖动可以使得整个灰色和蓝色的也一起拖动，而在灰色的界面内是无法实现拖动的。 javascript 样式很简单，就不多说。 其中的蓝色部分的id是top，而灰色部分的id是main。 window.o...
用js实现按钮的拖拽
lareinalove的博客
06-28 3781
最近做了一个需求，要求实现客服按钮的拖拽效果。 本来以为只是一个简单的拖拽效果，最后做起来却发现在拖拽结束的时候会触发按钮的点击事件。 查了一些文章后解决了这个问题，下面贴上代码： html： <div id="dragService" v-drag></div> css： #dragService{ position: fixed; width: 50p...
JavaScript 拖放效果系列三——解决快速拖拽的问题
最新发布
05-13
在拖拽的过程中，我们经常会遇到快速拖拽的问题，也就是鼠标移动速度太快，导致拖拽元素跟不上鼠标的移动速度，造成拖拽效果的不流畅。解决这个问题的方法有很多种，下面介绍两种常见的方法。 #### 方法一：使用 requestAnimationFrame requestAnimationFrame 是一个浏览器提供的 API，它可以让浏览器在下一次重绘之前执行指定的函数，这样可以保证函数执行的频率跟浏览器的重绘频率一致，避免了浏览器过度绘制和卡顿的问题。我们可以利用 requestAnimationFrame 来优化拖拽的效果。 具体实现方法如下： ```javascript let startX, startY, currentX, currentY; let element = document.getElementById('drag'); element.addEventListener('mousedown', function (event) { startX = event.clientX; startY = event.clientY; document.addEventListener('mousemove', onMouseMove); document.addEventListener('mouseup', onMouseUp); }); function onMouseMove(event) { currentX = event.clientX - startX; currentY = event.clientY - startY; requestAnimationFrame(updatePosition); } function updatePosition() { element.style.transform = `translate(${currentX}px, ${currentY}px)`; } function onMouseUp() { document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); requestAnimationFrame(() => { element.style.transform = `translate(${currentX}px, ${currentY}px)`; currentX = 0; currentY = 0; }); } ``` 在 onMouseMove 函数中，我们使用 requestAnimationFrame 来更新元素的位置，这样可以保证元素的位置更新频率跟浏览器的重绘频率一致，从而避免了拖拽效果的不流畅问题。在 onMouseUp 函数中，我们也使用 requestAnimationFrame 来更新元素的位置，并且将 currentX 和 currentY 重置为 0，这样可以避免多次拖拽时元素位置的累加。 #### 方法二：使用 CSS3 动画 除了使用 requestAnimationFrame，我们还可以使用 CSS3 动画来优化拖拽效果。具体实现方法如下： ```javascript let startX, startY, currentX, currentY; let element = document.getElementById('drag'); element.addEventListener('mousedown', function (event) { startX = event.clientX; startY = event.clientY; document.addEventListener('mousemove', onMouseMove); document.addEventListener('mouseup', onMouseUp); }); function onMouseMove(event) { currentX = event.clientX - startX; currentY = event.clientY - startY; element.style.transform = `translate(${currentX}px, ${currentY}px)`; } function onMouseUp() { document.removeEventListener('mousemove', onMouseMove); document.removeEventListener('mouseup', onMouseUp); element.style.transition = 'transform 0.2s ease-out'; element.style.transform = `translate(${currentX}px, ${currentY}px)`; setTimeout(() => { element.style.transition = ''; currentX = 0; currentY = 0; element.style.transform = ''; }, 200); } ``` 在 onMouseUp 函数中，我们首先给元素添加了一个过渡动画，这样可以让拖拽效果更加流畅。然后使用 setTimeout 函数来清除过渡动画，并将 currentX 和 currentY 重置为 0，最后将元素的 transform 属性重置为空。这样可以让元素回到原来的位置，同时避免了多次拖拽时元素位置的累加。 需要注意的是，这种方法需要我们手动设置过渡动画的时间，并且需要等待过渡动画执行完毕之后才能重置元素的位置，因此需要在 setTimeout 函数中设置一个适当的等待时间。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值