一：案例鼠标拖拽小方块，小方格跟着移动（桌面图标拖动）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box {width: 100px;height: 100px;background-color: pink;position: absolute;}#a {width: 100px;height: 100px;background-color: black;position: absolute;top: 100px;left: 100px;}</style>
</head><body><div id="box"></div> <!-- 第二个盒子测试第三步的鼠标松开时应该给document添加事件，而不是box --><div id="a"></div><script>/* 通过鼠标，拖拽box移动1.当鼠标在box1上按下时，功能开始 （mousedown）2.鼠标移动，box跟随鼠标一起移动  （mousemove）3.鼠标松开，功能结束，           （mouseup）box1固定在当前位置不再跟随鼠标移动*/let box = document.getElementById('box')//1.当鼠标在box1上按下时，功能开始（mousedown）box.onmousedown = function (event2) {let left = event2.clientX - box.offsetLeft;let top = event2.clientY - box.offsetTop;//2.鼠标移动，box跟随鼠标一起移动（mousemove）document.onmousemove = function (event) {box.style.left = event.clientX - left + 'px'box.style.top = event.clientY - top + 'px'}//3.鼠标松开，功能结束（mouseup） //第二步的事件取消了，小方块就不会移动了document.onmouseup = function () {document.onmousemove = null;}}</script>
</body></html>

二：取消拖拽文字的行为

就是取消文字拖拽...

1.没取消前：

2.取消后：

三：鼠标拖拽案例优化：

如果有好多个小盒子要做拖拽，一个一个加上面的1，2，3步太麻烦，升级版如下：

想法：①把所有onmousedown/onmousemove/onmouseup修改为addEventListener()

②希望页面中的元素只要含有drag这个class的就可以被拖拽

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box1,#box2,#box3 {width: 100px;height: 100px;background-color: pink;}/*添加拖动事件的盒子添加定位来移动  */.drag {position: absolute;}#a {width: 100px;height: 100px;background-color: black;position: absolute;top: 100px;left: 100px;}#box2 {top: 200px;background-color: rgb(109, 6, 140);}#box3 {left: 200px;background-color: rgb(179, 233, 31);}</style>
</head><body>取消文字拖拽<div id="box1" class="drag"></div> <!-- 第二个盒子测试第三步的鼠标松开时应该给document添加事件，而不是box --><div id="a"></div><!-- 我们都需要设置拖拽效果 --><div id="box2" class="drag"></div><div id="box3" class="drag"></div><script>/* 通过鼠标，拖拽box移动1.当鼠标在box1上按下时，功能开始 （mousedown）2.鼠标移动，box跟随鼠标一起移动  （mousemove）3.鼠标松开，功能结束，           （mouseup）box1固定在当前位置不再跟随鼠标移动*/// 二：方别的拖拽设置/*如果有好多个小盒子要做拖拽，一个一个加上面的1，2，3步太麻烦，升级版如下：想法：①把所有onmousedown/onmousemove/onmouseup修改为addEventListener()②希望页面中的元素只要含有drag这个class的就可以被拖拽*/(function () {let drags = null;let left;let top;let box1 = document.getElementById('box1')let box2 = document.getElementById('box2')let box3 = document.getElementById('box3')//1.当鼠标在box1上按下时，功能开始（mousedown）document.addEventListener('mousedown', function (event1) {if (event.target.classList.contains('drag')) {event.preventDefault();drags = event.target;left = event1.clientX - drags.offsetLeft;top = event1.clientY - drags.offsetTop;}})//2.鼠标移动，box跟随鼠标一起移动（mousemove）document.addEventListener('mousemove', function (event2) {if (drags) {drags.style.left = event2.clientX - left + 'px';drags.style.top = event2.clientY - top + 'px';}})//3.鼠标松开，功能结束（mouseup）//第二步的事件取消了，小方块就不会移动了document.addEventListener('mouseup', function () {drags = null})})()</script>
</body></html>

13.鼠标拖拽：案例:鼠标拖拽小方块，小方格跟着移动（桌面图标拖动）相关推荐

歌词同步滚动，比市面的大多数效果都好，在平滑滚动的前提下加上了鼠标滚轮滚动以及上下拖拽功能
歌词滚动核心原理解析歌词文件,转换成JSON 对象,java 代码放在最下面将歌词时间部分存到数组,字符部分放到 HTML 标签里面,通过Jquery 选中所有歌词 $li ,拿到一个类似于数组的 ...
js实现图片的放大缩小（鼠标长按拖拽、鼠标滚轮控制放大缩小）
系列文章目录文章目录系列文章目录背景与效果图 1.背景如下(功能图): 2.效果图如下: 拖拽后的效果缩放的效果放大的效果一.功能:支持鼠标长按拖拽 1.鼠标事件: 2.拖拽功能流程 3. ...
span标签的鼠标滑入提示_彻底搞懂拖拽——基于鼠标事件的拖拽以及基于HTML5 API的拖拽...
一.基于鼠标事件的拖拽原理--onmousedown.onmousemove.onmouseup onmousedown 该事件会在鼠标按键被按下时触发支持该事件的HTML标签: html < ...
127：vue+openlayers 使用CRTL控制map拖拽和鼠标滚动（示例代码）
第127个点击查看专栏目录本示例的目的是介绍如何在vue+openlayers项目中设置控制条件,使用CRTL控制map拖拽和鼠标滚动. 直接复制下面的 vue+openlayers源代码,操作2 ...
js 拖拽元素鼠标速度过快元素跟不上
自己写一个拖拽元素,使用js拖拽元素时,鼠标速度过快时元素跟不上鼠标参考了网上的文章 ,里面对比了绑定到 body和document上的不同点js 拖拽元素鼠标速度过快问题明白过来是因为速度过 ...
JS实现拖拽并解决拖拽过程中鼠标抬起仍旧处于拖拽状态问题
需求分析实现一个任意元素可以被鼠标任意拖拽:鼠标在这个元素上按下,开始拖拽,元素跟着鼠标一起移动,当鼠标松开时,被拖拽的元素固定在当前位置上.如图所示(底下灰色的轨迹不知道为啥录制动图就出现了,实际 ...
JS拖拽不流畅、鼠标滑动太快导致拖拽物脱离鼠标问题
###拖拽的实现原理:通过事件mousedown(事件的触发) →mousemove(事件的控制) →mouseup(事件的清除),拖拽的过程就是mousemove阶段: ###问题产生的原因:因为m ...
Python记录鼠标的点击与拖拽时间并在文本文档中保存记录
网上看到很多 python 关于记录鼠标操作轨迹的方法,很少提到关于时间的记录. 因为在写一个关于游戏的脚本,为了尽可能地还原真人鼠标操作防止封号,鼠标的点击的时间间隔是其中尤为重要的一点.代码监听了 ...
html5移动拖拽,H5鼠标拖拽移动
刚开始学H5的js,所以就全用js做的,只是为了锻炼自己的js基础以下就是我整个H5的代码 var box = document.createElement('div'); box.style.wi ...

13.鼠标拖拽：案例:鼠标拖拽小方块，小方格跟着移动（桌面图标拖动）

一：案例鼠标拖拽小方块，小方格跟着移动（桌面图标拖动）

二：取消拖拽文字的行为

1.没取消前：

2.取消后：

三：鼠标拖拽案例优化：

如果有好多个小盒子要做拖拽，一个一个加上面的1，2，3步太麻烦，升级版如下：

想法：①把所有onmousedown/onmousemove/onmouseup修改为addEventListener()

②希望页面中的元素只要含有drag这个class的就可以被拖拽

13.鼠标拖拽：案例:鼠标拖拽小方块，小方格跟着移动（桌面图标拖动）相关推荐

最新文章

热门文章