如何使用 P5js 在画布内拖动 DOM 元素而不离开画布？

Question

我想要什么：

我有一个 div，我想在画布周围移动它，但将其限制为画布宽度和高度

我有什么：

我正在使用p5.dom.js 库

P5js 代码：

let dragging = false;
let offsetX, offsetY, onsetX, onsetY;
let canvasWidth, canvasHeight;
let currentDragDiv;

function setup() {
    canvasWidth = windowWidth < 400 ? 400 : windowWidth;
    canvasHeight = windowHeight < 400 ? 400 : windowHeight;
    canvas = createCanvas(canvasWidth, canvasHeight)
            .mousePressed(createDiv);
}

function draw() {

    background(200);

    if(dragging){
        if(mouseX + onsetX < canvasWidth && mouseX + offsetX > 0){
            currentDragDiv.position(mouseX + offsetX, currentDragDiv.y);
        }
        if(mouseY + onsetY < canvasHeight && mouseY + offsetY > 0 ){
            currentDragDiv.position(currentDragDiv.x, mouseY + offsetY);
        } 
    }
}

function createDiv(){
    let div = createDiv("")
        .mousePressed(function(){ dragDiv(div); })
        .mouseReleased(function(){ dropDiv(div); })
        .position(mouseX, mouseY);
}

function dropDiv(){
    dragging = false;
    currentDragDiv = null;
}

function dragDiv(d){
    currentDragDiv = d;
    dragging = true;        
    offsetX = currentDragDiv.x - mouseX;
    offsetY = currentDragDiv.y - mouseY;
    onsetX = currentDragDiv.width + offsetX;
    onsetY = currentDragDiv.height + offsetY;
}

问题：

此代码运行良好，但如果用户移动鼠标过快，则 div 不会移动，直到出现 this 之类的画布边框（我将 div 快速向右拖动并移动它停在屏幕中间）。这个问题使得变量 onsetX 和 onsetY 出错，并且根据 div 离画布边框的距离而有点混乱。

是否可以去掉这个“错误”，让 div 一直到画布的边框？

观察：

1. 我删除了一些我认为对这个问题没有必要的代码。
2. 变量onsetX 和onsetY 是offsetX 和offsetY 的对面，是鼠标位置的边框位置，但是因为英语不是我的母语，所以我不知道如何命名变量。建议会很好。

Answer 1

在您当前的代码中，如果超出了画布的边框，则完全省略了拖动：

if(mouseX + onsetX < canvasWidth && mouseX + offsetX > 0){
    currentDragDiv.position(mouseX + offsetX, currentDragDiv.y);
}
if (mouseY + onsetY < canvasHeight && mouseY + offsetY > 0 ){
    currentDragDiv.position(currentDragDiv.x, mouseY + offsetY);
}

您必须将拖动限制在从 0 到 canvasWidth 分别为 0 到 canvasHeight 的范围内。这意味着您必须将拖动“钳制”到此范围：

function draw() {
    let newX, newY;

    background(200);

    if(dragging){

        newX = mouseX + offsetX;

        if ( newX > canvasWidth ) {
            newX = canvasWidth - currentPostIt.width;
        } 
        if ( newX < 0 ) {
            newX = 0;
        }

        newY = mouseY + offsetY;

        if ( newY > canvasHeight ) {
          newY = canvasHeight - currentPostIt.height;
        } 
        if ( newY < 0 ) {
          newY = 0;
        }

        currentDragDiv.position(newX, newY);
    }
}