原生js实现拖拽，并设置拖拽边界

最新推荐文章于 2023-11-28 11:58:47 发布

boboj1

最新推荐文章于 2023-11-28 11:58:47 发布

阅读量2k

点赞数 4

分类专栏： JavaScript 文章标签： js javascript

本文链接：https://blog.csdn.net/Wind_AN/article/details/117528660

版权

本文介绍如何通过JavaScript实现元素的拖拽功能，并在拖动过程中限制其边界。主要涉及offsetLeft/offsetTop属性，以及利用e.clientX/e.clientY获取鼠标位置，结合document.documentElement.clientWidth来设定拖拽范围。

摘要由CSDN通过智能技术生成

主要思路
1.首先获取鼠标在方块中的位置，以下用到的知识点

offsetLeft/offsetTop(元素相对于最近定位父级元素的坐标，若在所有的父级上都没有定位，则相对于整个文档)
e.clientX/e.clientY

2.移动时鼠标的位置减去按下的时候鼠标在方块中的位置，将这个位置设置边界（range函数）
知识点

document.documentElement.clientwidth返回整个文档的可见宽度

//判断边界问题
//loc当前位置，Min最小位置，max最大位置
function range(loc,min,max) {
   
    if(loc > max) {
   
        return max;
    }else if(loc < min) {
   
        return min;
    }else {
   
        return loc;
    }
}

在这里插入图片描述

全部代码
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

boboj1

关注关注

4
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

vue js拖拽

qq_38985444的博客

08-10

203

methods:{ move(e){ let odiv = e.target; //获取目标元素 //算出鼠标相对元素的位置 let disX = e.clientX - odiv.offsetLeft; let disY = e.clientY - odiv.offsetTop; document.onmousemove = (e.

元素拖拽的列子，设置拖拽边界值

rojie0的博客

07-13

194

【代码】元素拖拽的列子，设置拖拽边界值。

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

JS-拖拽效果至视窗 \ 边界（鼠标事件拖拽、监听拖拽）

DcTbnk的博客

04-02

2412

一. 拖拽至视窗拖拽的效果 — 边界值鼠标移动出页面,但是div要留在页面范围内给定位数值,添加极限范围数值, 定位的最大值,最小值,都要有范围最小值 : 上左都是 0 var oDiv = document.querySelector('div'); var oldTop = window.getComputedStyle(oDiv).top; var oldLeft = w...

JS--Day13(拖拽边界判断+正则)

weixin_72756818的博客

03-15

421

JS--Day13(拖拽边界判断+正则)

原生js实现拖拽考虑浏览器窗口边界详细版代码+注释

weixin_34248849的博客

04-19

706

关于拖拽元素，在网上有很多例子，但都比较简单，且大多数没有完全考虑浏览器窗口边界。参考多方资料，自己写了个较完善的封装拖拽的方法。先贴出代码，复制后运行看下效果，所有理解在注释中较详细说明。 <!DOCTYPE html> <html lang="en"> <head> <meta cha...

原生JS实现拖拽排序（亲测可用）

04-06

原生JS实现拖拽排序可以避免引入额外的库，从而提高页面性能和减少依赖。以下是一个详细的知识点说明，涵盖了如何用原生JS实现拖拽排序的关键步骤。 1. **事件监听**： - 首先，我们需要为可拖动元素添加`...

原生js实现拖拽功能基本思路详解

10-18

原生JavaScript实现拖拽功能涉及到的几个核心概念和步骤包括：鼠标事件的捕获、鼠标坐标与元素坐标的计算以及元素位置的动态更新。现在，我们将详细解释这些知识点，并结合示例代码来深入理解。首先，要实现拖拽，...

原生javascript实现拖拽改变table表格行高（html）

05-06

原生JavaScript实现的拖拽功能能够为用户带来直观、便捷的操作体验。在这个特定的场景中，我们关注的是如何使用JavaScript来实现拖拽改变HTML表格（table）的行高。标题提到的“原生javascript实现拖拽改变table表格...

原生javascript实现拖动元素示例代码

12-10

在本文中，我们将深入探讨如何使用原生JavaScript实现一个简单的元素拖动功能。这个功能是通过监听和响应鼠标事件来实现的，特别是"mousedown"、"mousemove"和"mouseup"这三个事件。首先，我们需要理解拖动元素的...

EasyUI防止window框拖拽出边界js代码

10-20

EasyUI弹窗拖曳出边界后无法回到窗口位置，造成用户点击不到

可拖动div边框改变大小的方法

11-21

可拖动div边框改变大小的方法,jquery拖拽改变div大小效果，。。。。。。。。。。。。。。。。。。。。。。。。。

拖拽效果及边界判定

小森呀

06-27

2571

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>拖拽效果及边界判定</title> <style type="text/css"> *{ margin: 0; padding: 0; } div...

移动端左右拖拽和临界问题

weixin_45777923的博客

05-02

470

移动端左右拖拽和临界问题在移动端，我们设置功能展示的时候，可能视口宽度并不能完全将我们所需要的东西全部展示出来，因此我们使用css中的overflow-x: scroll;进行设置，但是今天我们要讲是利用js来是实现拖拽移动效果，并且下面带有一个滚动条显示当前移动的进程。例如淘宝首页的功能块。全部的代码和成品图如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta htt

jsdiv的拖拽优化，和边界限定

qq_45219069的博客

07-03

2314

前端面试题：用 mouse 事件写一个可拖曳的 div，考虑了浏览器边界情况

robertzsun

06-13

385

思路第一层：先搞定基础的代码设定，再来考虑边界的问题。总体框架应该是鼠标按下，鼠标移动，松鼠标。先上html代码，带一个有border，有padding，有背景颜色的div盒子 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> <style> * { m

如何使用js实现拖拽效果？

最新发布

黄彪博客

11-28

3133

因为设置了拖拽属性的元素就可以被拖拽，结束拖拽的时候获取一下鼠标与页面的距离，减去鼠标与元素中的距离就行了，逻辑为旧有拖拽方式的第二种：盒子的位置 = 元素与页面间的距离 - 元素与盒子的距离。：返回元素与有定位的父类的上左边距，如果父类都没有定位，那么返回相对于页面的上左边距（本示例中页面内只有一个元素，故获取的值是元素相对于页面的距离）：鼠标距离触发事件的元素的上左边距（本示例中只有一个元素，故获取的值为鼠标相对于盒子元素的上左边距）// 元素的位置 = 鼠标与页面的距离 - 鼠标与元素的距离。

拖拽元素边界改变高宽

weixin_43096828的博客

02-11

402

拖拽元素边界改变高宽 css样式 #TuoDongSize{ background-color:#000; margin:40px 0; position:relative; border:0; } #TuoDongSize .content{ width:300px; padding: 10px; color: #fff; line-height:25px; } html 元素 <div id="TuoDongSize">

一个问题——关于用JS中实现拖拽div，当我把div改为圆形就会出bug这件事

surymy

03-26

601

一个平平无奇的拖拽功能： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onload = function(){ var box1 = document.getElementById("box1") box1.onmous

js 实现拖拽

csdn_chenli

09-29

646

JavaScript基础入门学习，实现移动拖拽。适合新手学习和参考。不足之处希望大神提出你宝贵的意见。一：实现简单的拖拽二：实现浏览器的兼容性。在拖拽的过程中不会超出屏幕，当你拖拽物体放在那里，就是那里。如果放在右下角，缩小屏幕是，物体不会被遮罩。实现效果：一、简单的实现拖拽一界面设计二设计效果由于我们弹窗的遮罩我们采用了c