Question

function move(event){
    box.style.left=event.clientX-25+"px";
    box.style.top=event.clientY-25+"px";
}

我创建了一个名为box的动态div元素，然后添加了mouseup和mousedown事件，在mouseup中，将添加mousemove事件，在mousedown中，它将被删除

当使用函数move添加mousemove事件时，也会使用相同的

删除

我想确保当我移动鼠标或拖动框时，此元素不会离开屏幕

非常感谢你

Answer 1

您必须事先定义拖动元素的尺寸，然后根据窗口的宽度和高度限制x和y：

var element_w = 50
var element_h = 50

function move(event){
    box.style.left=Math.max(0,Math.min(window.innerWidth-element_w,event.clientX-25))+"px";
    box.style.top=Math.max(0,Math.min(window.innerHeight-element_h,event.clientY-25))+"px";
}

Answer 2

mousemove 事件从最后 mousemove 事件位置获得增量。

有了这些信息，您有两种选择：

当用户第一次按下鼠标按钮时获取当前位置，并将其增量添加到初始值
在每次移动鼠标时获取框的当前位置，并为其添加增量。

第二个是更多的内存消耗，并且由于位置计算会为移动创建滞后，因此第一个选项是您应该使用的选项。

不要干扰你的学习曲线。但这是一种常见的情况，无论你在哪里搜索它，你都会找到正确而有效的答案。你只需要搜索它。例如，这里有一个：javascript use drag to move element

元素在拖动时停止播放〜仅限JavaScript

2 个答案: