我有一个说100px，100px维度的div，onmousedown我想在这个div中移动一个对象，并且希望鼠标不要指向除div之外的任何其他位置，以便我的对象放在div中。鼠标将恢复正常onmouseup。
将鼠标放在div中只需要什么javascript？
答案 0 :(得分：4)
不可能悲伤......或者如果你认为一些广告可能会对它做些什么，那就很开心。
编辑：找到了这个讨论，有人提出了一个新颖的解决方法Move Mouse Cursor Javascript
答案 1 :(得分：3)
像其他人一样，你不能将鼠标光标限制在特定区域。但也许这不是你想要的。看看这个jQuery UI演示：Constrain Movement。它通过将内部对象保持在父对象内来实现所需的效果（参见框中说“我包含在我的父对象中”）。
<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>
答案 2 :(得分：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>
答案 3 :(得分：1)
如果您想要一个创造性的解决方案，以下是您认为非常有创造性的解决方案：
1：使用[element]。requestPointerLock()
2：创建鼠标光标的新图像。 (here's one you might like)
3：创建2个新变量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]将其关闭。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>New webpage</title>
</head>
<body>
<img id="div" src="https://b.sccpre.cat/mypng/small/51- 518482_mouse-svg-cursors-mac-transparent-background-mouse-cursor.png" 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>
答案 4 :(得分：0)
您无法使用javascript控制鼠标位置，您唯一能做的就是读取鼠标位置并对其做出反应。也许你可以移动div，以便它始终在鼠标下？
答案 5 :(得分：0)
您不能约束鼠标。
但是如果你想约束另一个对象（例如，一个被鼠标拖动的对象），你可以。但是，您需要提供有关您尝试做什么以及如何做的更多信息..
答案 6 :(得分：0)
那是完全不可能的，你应该感激它。你的鼠标是你系统的主要输入，如果浏览器能够控制或控制它，那么网站几乎没有任何东西可以做。
然而，有可能将拖动的对象限制在另一个DIV中 - 例如，jQueryUI的draggable（）使得这非常容易。
答案 7 :(得分：0)
我似乎已经为我的项目找到了解决方法。
我做了以下事项：
1.使用CSS，禁用文档中每个元素的默认单击事件
2.对于身体：cursor:none;。
3.将position:fixed; div函数作为伪鼠标
4.使用jQuery跟踪鼠标速度，从而使你的伪鼠标失效
5.从那里开始工作。
警告：您的真实鼠标仍会在网页外正常运行。我的目的不需要点击任何元素，因此有效。
答案 8 :(得分：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>