Question

我正在尝试将一个元素捕捉到另一个元素下方，并使它保持原状。该功能还可以，但是每次我将其移动10px时它就会运行。因此，每次都将其移动10px。

   function move_box() {

    if(el.offsetLeft = 10){
        console.log('moved the element 10px to the left!');
        el.setAttribute('class', 'snap_in'); // class with css (transform: translateY(10px)

        let not_called = false; 
        console.log(not_called);

    } else if (not_called = false){
        console.log(not_called);
        el.setAttribute('class', 'dont_move'); //class with css transform:translateY(0px);
    }  
}

}

Answer 1

使用'=='代替=

您分配的是不比较

const el = document.querySelector('.item');
let not_called;
el.addEventListener('mousedown', mousedown);

function mousedown(e){

window.addEventListener('mousemove', mousemove);
window.addEventListener('mouseup', mouseup);

let prevX = e.clientX;
let prevY = e.clientY;

function mousemove(e) {
    let newX = prevX - e.clientX;
    let newY = prevY - e.clientY;

    const rect = el.getBoundingClientRect();

    el.style.left = rect.left - newX + "px";
    el.style.top = rect.top - newY + "px";

    prevX = e.clientX;
    prevY = e.clientY;  

}
function mouseup() {
    window.removeEventListener('mousemove', mousemove);
    window.removeEventListener('mouseup', mouseup);
    console.log(el.offsetLeft);
    console.log(el.offsetTop);
    //let leftoffset = el.offsetLeft;
    if (not_called == false){
        console.log(not_called);
        el.setAttribute('class', 'item');
    }
    else if(el.offsetLeft >= 180 && el.offsetLeft <= 220){
        console.log('yes!');
        el.setAttribute('class', 'snap_in');
        not_called = false;
        console.log(not_called);

    }

}
}

防止setAttribute运行两次

1 个答案: