我有一个大小为100px x 100px的div，在onmousedown事件触发时，我想移动这个div内部的一个对象，并且希望鼠标不能指向除该div以外的任何地方，以便我的对象放置在div中。当onmouseup事件触发时，鼠标将恢复正常。
应该使用什么javascript代码来保持鼠标仅限于该div中？
将鼠标保持在一个 div 内部
9
- Varun
3
你不能使用JS移动或停止光标，因此可能无法实现。 - Calum
这个问题已经快5年了，有没有更新的解决方案？ - Mahdi Alkhatib
@MahdiAlkhatib - 正如Calum所建议的，如果内部div移出了外部div，最多我们只能控制它的位置。 - Varun
9个回答
4
很遗憾，或者如果你考虑一些广告可能会做什么的话，也可以是幸福的。
编辑：在这个讨论中发现了一个人提出的新颖解决方法JavaScript移动鼠标光标
- Jim Blackler
2
我们的 Stack Overflow 伙伴提供了不错的链接和建议，但是在这里无法实现 :( - Varun
这个问题已经快5年了，有没有更新的解决方案？ - Mahdi Alkhatib
3
像其他人说的那样，你不能限制鼠标光标在特定区域内。但也许这不是你想要的。看看这个jQuery UI演示：限制移动。它通过将内部对象保持在父对象内（看到写着“我被包含在我的父级内”的框）来实现所需效果。
<div class="draggable ui-widget-content">
<p id="draggable5" class="ui-widget-header">I'm contained within my parent</p></div>
<script>
$(function() {
$( "#draggable5" ).draggable({ containment: "parent" });
});
</script>
- miguelv
4
是的！！！是的！！！是的！！！我想要的就是这样的东西... 有什么办法可以在JS中实现吗？？？ - Varun
当然：通过访问http://jqueryui.com/download，单击“取消选择所有组件”，然后选择“可拖动”交互，并单击“下载”来下载jQuery UI可拖动行为。这将为您提供具有所需功能的最小jQuery UI包。然后返回我提到的演示并单击“查看源代码”以查看使用此库实现所需内容的示例代码。 - miguelv
您需要在页面中包含来自zip文件的2个js文件(js\jquery-1.5.1.min.js和js\jquery-ui-1.8.11.custom.min.js)。 - miguelv
1我在我的答案中添加了一些JS和HTML片段来指导您。请注意，仅为此效果在页面中包含一个大型库，如jQuery UI，并不是非常鼓励的，但我有一种感觉，从现在开始您将会经常使用它。 - miguelv
3
使用Javascript无法控制鼠标位置；但是您可以获取其位置以控制所需的对象...这里是一个简单的代码，几乎可以实现此功能：
<html>
<body>
<div id="divID" style="width: 100px; height: 100px; position: absolute; left: 250px; top: 300px; background: #000"></div>
<div id="divChild" style="width: 20px; height: 20px; color: #f00; position: absolute; background: #f00;"></div>
</body>
<script>
var div = document.getElementById("divID");
var divChild = document.getElementById("divChild");
mousepressed = 0;
function handleMyMouseMove(e) {
var mouseX = e.clientX;
var mouseY = e.clientY;
if(mousepressed) {
divChild.style.left = mouseX + "px";
divChild.style.top = mouseY + "px";
}
}
function handleMyMouseDown(e) { mousepressed = 1; }
function handleMyMouseUp(e) { mousepressed = 0; }
div.addEventListener("mousemove", handleMyMouseMove, false);
div.addEventListener("mousedown", handleMyMouseDown, false);
window.addEventListener("mouseup", handleMyMouseUp, false);
</script>
</html>
- Elieder
1
截至2019年，有指针锁定API：https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API - Denis Giffeler
1
如果您想要一个创意的解决方案，这里有一个非常有创意的建议：
1：使用[element].requestPointerLock()
2：创建一个新的鼠标光标图片。（这里有一个您可能会喜欢的）
3：创建两个新变量x和y，并锁定图像位置。
4：编写：
1：使用[element].requestPointerLock()
2：创建一个新的鼠标光标图片。（这里有一个您可能会喜欢的）
3：创建两个新变量x和y，并锁定图像位置。
4：编写：
document.addEventListener('mousemove', function(){
x += window.movementX;
y += window.movementY;
});
步骤5：编写if语句，使鼠标图像保持在元素内。确保将if语句放在以上的eventlistener内部。
document.addEventListener('mousemove', function(){
x += window.movementX;
y += window.movementY;
if(x < parseFloat(element.style.left)){
x = parseFloat(element.style.width);
}
if(x > parseFloat(element.style.left) + parseFloat(element.style.width)){
x = parseFloat(element.style.width) + parseFloat(element.style.width);
}
if(y < parseFloat(element.style.top)){
y = parseFloat(element.style.top);
}
if(y > parseFloat(element.style.top) + parseFloat(element.style.height)){
y = parseFloat(element.style.top) + parseFloat(element.style.height);
}
});
请确保将“element”替换为存储您元素的变量名称，如果您打算使用此精确代码。
并且不要忘记通过将x和y分配给其位置来更新您的元素的位置，每次使用它都要这样做。尝试下面的代码。它已经实现并测试了所有这些步骤。只需点击屏幕开始，按[Esc]关闭即可。
<style>
cursor: none;
</style> <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>New webpage</title>
</head>
<body>
<img id="div" src="https://lh3.googleusercontent.com/proxy/-3xjuhfpWxL0kfTWr6B2ZGmIKt7xWJ4d-3XcKg4m3wO4sMEen9cg_euf2xlkxwIrSbzQ0lOkDcUUI8TjEV172KVSPshQta9-Stql5WtHpzwkFrHQOY8X2S_PCEHg6GYJW6Zjr6PJeeFBNnLwdiAtB4XpWQ" alt="hi" style="position: absolute; width: 20px; height: 20px;">
<div id="cage" style="width: 200px; height: 200px; background- color: lightgray; left: 0px; top: 0px;">
</div>
<h1 id="tx">click to start</h1>
</body>
<script>
var d = document.getElementById('div');
var tx = document.getElementById('tx');
document.addEventListener('click', function(){
var txt = tx.textContent;
if(txt === "click to start"){
d.requestPointerLock();
tx.textContent = "click to stop";
}
if(txt === "click to stop"){
document.exitPointerLock();
tx.textContent = "click to start";
}
});
var x = 0;
var y = 0;
var cage = document.getElementById('cage');
document.addEventListener("mousemove", function(e){
x += e.movementX;
y += e.movementY;
if(x < parseFloat(cage.style.left)){
x = parseFloat(cage.style.left);
}
if(x > parseFloat(cage.style.left) + parseFloat(cage.style.width)){
x = parseFloat(cage.style.left) + parseFloat(cage.style.width);
}
if(y < parseFloat(cage.style.top)){
y = parseFloat(cage.style.top);
}
if(y > parseFloat(cage.style.top) + parseFloat(cage.style.height)){
y = parseFloat(cage.style.top) + parseFloat(cage.style.height);
}
d.style.left = x + 'px';
d.style.top = y + 'px';
});
</script>
</html>- person the human
0
我正在寻找类似的解决方案，以限制鼠标仅在我的文档视图上移动，但由于不可能，因此尝试在来自w3schools的可移动div脚本中进行了修改，以便将元素限制在文档视图中。
这是我的代码：
dragElement(document.querySelector(".movable"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
elmnt.onmousedown = dragMouseDown;
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
if((elmnt.offsetTop - pos2) < 0) {
elmnt.style.top = "0px";
}
if((elmnt.offsetLeft - pos1) < 0) {
elmnt.style.left = "0px";
}
if(((elmnt.offsetTop - pos2) + elmnt.getBoundingClientRect().height) > window.innerHeight) {
elmnt.style.top = (window.innerHeight - elmnt.getBoundingClientRect().height) + "px";
}
if(((elmnt.offsetLeft - pos1) + elmnt.getBoundingClientRect().width) > window.innerWidth) {
elmnt.style.left = (window.innerWidth - elmnt.getBoundingClientRect().width) + "px";
}
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
}
}table.movable {
position: fixed;
z-index: 999;
background-color: #f1f1f1;
text-align: center;
}
table.movable thead > tr:nth-of-type(2) > th,
table.movable tbody > tr > td {
font-size: 13px;
}
table.movable .header {
padding: 5px 10px;
cursor: move;
background-color: #3C4044;
color: #fff;
}
table.movable tr:nth-of-type(2) > th {
background-color: #3C4044;
color: #fff;
}<table class="movable" width="300" border="2">
<thead>
<tr>
<th colspan="3" class="header">Header</th>
</tr>
<tr>
<th width="100">Sub-header 1</th>
<th width="100">Sub-header 2</th>
<th width="100">Sub-header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>- The Terrible Child
0
你无法使用JavaScript控制鼠标位置，唯一能做的就是读取鼠标位置并对其做出反应。也许你可以移动div，使其始终在鼠标下方？
- Florian
1
1哈哈，这将是一个惊人的解决方法。想象一下，你正在地图上放置一个对象，如果你用对象滚动出去，地图会跟着你移动！ - Shaded
0
你无法约束鼠标。
但是，如果你想约束另一个对象（例如，被鼠标拖动的对象），你是可以的。但你需要提供更多关于你尝试做什么以及如何做的信息。
- Gabriele Petrioli
0
这是完全不可能的，你应该为此感到庆幸。你的鼠标是系统的主要输入设备，如果浏览器能够控制或劫持它，那么网站几乎可以做任何事情。
然而，有可能将拖动的对象限制在另一个DIV中 - 例如，jQueryUI的draggable()使这变得非常容易。
- Winfield Trail
0
我似乎找到了我的项目的一种解决方法。
我做了以下几件事：
1. 使用 CSS 禁用文档中每个元素的默认点击事件。
2. 对于 body 标签： cursor:none;。
3. 有一个 position:fixed; 的 div 元素作为伪鼠标。
4. 使用 jQuery 跟踪鼠标速度，从而定位您的伪鼠标。
5. 从那里开始执行。
警告：在您的网页之外，您的真实鼠标仍将正常工作。我的目的不需要单击任何元素，因此这种方法可行。
- Ryan Dsouza
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接