js+限制拖动范围
在JavaScript中实现拖动元素并限制其拖动范围，通常涉及到事件监听和处理。以下是一些基础概念和相关实现细节：
基础概念
- 拖动事件：
mousedown：鼠标按下时触发。mousemove：鼠标移动时触发。mouseup：鼠标释放时触发。
- 坐标计算：
- 使用
event.clientX和event.clientY获取鼠标在视口中的坐标。 - 使用元素的
offsetLeft和offsetTop获取元素相对于其包含块的偏移量。
- 使用
实现步骤
- 绑定事件：
- 在目标元素上绑定
mousedown事件。 - 在
document上绑定mousemove和mouseup事件，以便在整个文档范围内跟踪鼠标移动和释放。
- 在目标元素上绑定
- 记录初始位置：
- 在
mousedown事件中记录鼠标按下时的坐标和元素的初始位置。
- 在
- 计算新位置：
- 在
mousemove事件中计算鼠标移动的距离，并更新元素的位置。
- 在
- 限制拖动范围：
- 在更新元素位置时，检查新的位置是否超出允许的范围，如果超出则限制在边界内。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag and Limit Range</title>
<style>
#draggable {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50px;
left: 50px;
cursor: move;
}
#container {
position: relative;
width: 500px;
height: 500px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="container">
<div id="draggable"></div>
</div>
<script>
const draggable = document.getElementById('draggable');
const container = document.getElementById('container');
let isDragging = false;
let startX, startY, initialLeft, initialTop;
draggable.addEventListener('mousedown', (e) => {
isDragging = true;
startX = e.clientX;
startY = e.clientY;
initialLeft = draggable.offsetLeft;
initialTop = draggable.offsetTop;
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
});
function onMouseMove(e) {
if (!isDragging) return;
const dx = e.clientX - startX;
const dy = e.clientY - startY;
let newLeft = initialLeft + dx;
let newTop = initialTop + dy;
// 获取容器的边界
const containerRect = container.getBoundingClientRect();
const draggableRect = draggable.getBoundingClientRect();
// 限制拖动范围
newLeft = Math.max(containerRect.left, Math.min(newLeft, containerRect.right - draggableRect.width));
newTop = Math.max(containerRect.top, Math.min(newTop, containerRect.bottom - draggableRect.height));
draggable.style.left = `${newLeft}px`;
draggable.style.top = `${newTop}px`;
}
function onMouseUp() {
isDragging = false;
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
}
</script>
</body>
</html>解释
- HTML结构：
#container：拖动范围的边界。#draggable：可拖动的元素。
- CSS样式：
#draggable设置为绝对定位，以便可以通过left和top属性移动。#container设置为相对定位，并添加边框以便观察拖动范围。
- JavaScript逻辑：
- 在
mousedown事件中记录初始位置和鼠标位置。 - 在
mousemove事件中计算新的位置，并检查是否超出容器边界。 - 在
mouseup事件中停止拖动，并移除事件监听器。
- 在
通过这种方式，可以实现元素的拖动并限制其拖动范围。
相关·内容
我认为世界范围如下所示并将其设置为地图以限制缩放zoom : this.mapOptions.zoom, })
如果我们使用鼠标滚轮，我们的缩放不会超出范围，但我们可以拖动和查看地图的范围之外。怎
浏览 7提问于2016-11-26得票数 1
我希望将整个日历小部件上可选日期的范围限制为one day only (默认情况是拖动多个日期，或单击单个日期)。我希望通过以下方法有效地禁用用于选择多个日期的拖动功能：
有关于如何使用week视图通过在selectConstraint选项中指定start和end限制日期选择的答案。如何将日期选择范围限制为按月查看一天
浏览 4提问于2019-10-26得票数 0
回答已采纳
1回答
是否有将范围值的更改限制为仅拖动句柄的方法？<input type="range" min="0" max="50">
浏览 1提问于2021-05-10得票数 0
我在一个html模式上有一个"textarea“标签，它可以调整大小，但是如果我拖动并调整"textarea”的大小，它可以被拖出模式的范围。示例：
浏览 0提问于2016-12-15得票数 1
2回答
我正在使用一个WPF应用程序，更具体地说是一个带有可拖动元素的画布。private void WidgetCanvas_PreviewHeaderLeftMouseDown(object sender, MouseButtonEventArgs一旦我开始拖动(PreviewMouseMove)，我将监控鼠标的移动，所以最糟糕的情况是，我可以手动检查鼠标的位置，并将其限制
浏览 5提问于2009-05-12得票数 3
回答已采纳
1回答
通过限制d3.event.translate值，我设法限制了图表元素的拖动范围： ty = Math.min(0, d3.event.translate[1]);图表上的条形图在向下或向左拖动时限制为0。X和y轴不是，对如何解决轴问题有什么想法吗？
浏览 2提问于2014-06-10得票数 5
回答已采纳
1回答
在图形示例中：
因为我们设置了它的拖放限制，但没有控制它的大小限制。也许有什么办法可以做到这一点。
如果有人知道，请提前让我know.Thanks：)
浏览 4提问于2012-09-05得票数 0
1回答
有没有办法给scrollView添加一个滚动范围？我做了一个用户可以拖动视图的屏幕，我想限制将它们拖动到某些坐标的可能性，并在运行时根据视图中对象的数量修改这些坐标。
浏览 0提问于2011-09-05得票数 3
1回答
我目前正试图在我的d3脚本中创建可拖放的行为。我在这里学习Mike的例子：function dragmove(d) { .attr("cx", d.x = Math.max(radius, Math.min(width - radius, d3.event.x)))}
为什么使用这个Math.max和
浏览 1提问于2013-02-21得票数 1
我正在寻找一个时间范围选择器，如可拖动的谷歌分析时间线部分元素。我不想使用flash/flex来实现这一点，我正在寻找一个javascript版本。
浏览 0提问于2011-04-26得票数 2
1回答
设置地图边界
、、
我有一张地图，我想把它限制在一定的范围内。我允许使用两个缩放级别5和8。在缩放级别5上，我可以通过在拖动事件时使用setCenter()函数将地图的中心设置为调整，从而防止地图移动。当我以缩放级别8放大时，我希望防止用户将地图拖动到指定限制之外。限制是缩放级别5的界限。我已经尝试了一些方法，但都没有效果。当我使用fitbounds()时，它将我踢回了缩放级别5。我基本上只是想限制你在地图上可以走多远。任何帮助都将不胜感激。
G
浏览 0提问于2012-02-22得票数 0
2回答
我已经将拖动移动限制在拼图的范围内，但是当我拖动它们时，ap div是重叠的。我希望相同的z索引可以防止它们重叠，但当我拖动时，它们会重叠。如何防止它们重叠？我使用的是HTML和JavaScript。
浏览 1提问于2011-06-14得票数 0
15回答
在V2中，有一种方法可以限制平移/拖动，以便地图保持在特定的范围内。在V3中如何做到这一点呢？请给出工作示例或代码片段-我不是一个专家程序员…
浏览 10提问于2010-06-27得票数 76
1回答
为了某些目的，我需要画布中的输入类型范围，我需要使用它来更改我的fontsize。我已经使形状和可拖动，但圆圈控制器超越线。这是KonvaJs库的。
浏览 3提问于2016-02-02得票数 1
回答已采纳
在openlayers.js (当前版本5.3.0)中，如何在鼠标拖动时限制地图？lat的范围应为-90,90。q=drag https://docs.mapbox.com/mapbox-gl-js/example/add-image-animated/ 如果将地图拖动到经度-90，90上，则地图框中的地图将自动限制范围openlayers3-how-to-limits-the-drag-range-of-the-map 我尝试
浏览 104提问于2019-05-18得票数 0
我在一个项目中使用jQuery UI Slider，并且需要以某种方式限制用户可以选择的范围。滑块上有2个拖曳器。值，例如0,100，左拖动为50，右拖动为55。当左拖动移至45时，我需要将右拖动移至50，所以差异始终为5。当我更改右拖放位置时也是如此。例如，如果右拖动程序被移动到60，则左侧拖放程序应该移动到55。
浏览 6提问于2014-03-19得票数 2
回答已采纳
我向我的主UIView添加了一个子视图(名为panel)，并且我向其中添加了gestureRecognizer，因为我希望它只在Y轴上可拖动，并且只在某些限制下可拖动(例如，160,300，超过300它不能移动the drag to some coordinates no more drag}
但现在我不知道如何将阻力限制在这些坐标上如何将拖动限制在坐标范围内？(x =160(中间屏
浏览 1提问于2012-07-12得票数 6
回答已采纳
0回答
我想要的是设置搜索栏的限制。虽然我已经使用seekBar.setMax(anyIntValue);完成了这项工作，但这会设置整个搜索栏的值。
浏览 1提问于2017-11-27得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
