Javascript:通过eventListener拖动图像时出现视觉问题

Javascript: visual issue when dragging image by eventListener

本文关键字：视觉 问题 图像 通过 eventListener 拖动 Javascript      更新时间：2023-11-15

我正在制作一个脚本，使用eventListener而不是.onSomeEvent:在帧中拖动图像

var destForm, destFoto, destX, destY;
function destaqueIni(){
    destForm = document.forms["form_destaque"];
    destFoto = new Object();
    destFoto.img = document.getElementById("form_destaque_foto");
    destFoto.w = destFoto.img.clientWidth;
    destFoto.h = destFoto.img.clientHeight;
    destFoto.x = 0; //Number(destForm.fotoDestaque_x.value);
    destFoto.y = 0; //Number(destForm.fotoDestaque_y.value);
    destFoto.escala = Number(destForm.fotoDestaque_escala.value);
    //
    document.getElementById("form_destaque_janela").style.height = "380px";
    //
    destFoto.img.draggable = true;
    destFoto.img.addEventListener("dragstart", destaqueFotoDragStart, false);
    destFoto.img.addEventListener("dragend", destaqueFotoDrag, false);
}
function destaqueFotoDragStart(evt){
    //evt.preventDefault();
    //console.log("destaqueFotoDrag: Foto Arrastada... img.x: "+evt.clientX+" destX: "+destX);
    destX = evt.clientX;
    destY = evt.clientY;
}
function destaqueFotoDrag(evt){
    evt.preventDefault();
    //console.log("destaqueFotoDrag: Foto Solta... img.x: "+evt.clientX+" destX: "+destX);
    var x = destFoto.x + (evt.clientX-destX);
    var y = destFoto.y + (evt.clientY-destY);
    destForm.fotoDestaque_x.value = x;
    destForm.fotoDestaque_y.value = y;
    destaqueFotoAtualizar();
}
function destaqueFotoAtualizar(){
    destFoto.img.style.left = String(Math.ceil(destForm.fotoDestaque_x.value/2))+"px";
    destFoto.img.style.top = String(Math.ceil(destForm.fotoDestaque_y.value/2))+"px";
}

它工作（仍在工作，但正在拖动）。因此，图像会被移动，但在图像被放置在新的x，y坐标之前，浏览器会将动画返回到原始位置——在它跳到正确的位置之后。这是一个漂亮的bug！如何防止浏览器在发布后制作动画？我试过preventDefault()，但没用。。。

搜索"在浏览器中停止拖动图像"，您就会得到答案。

$("img").mousedown(function(){ return false; });
$(document).on("dragstart", function() { return false; });
$(document).on("dragstart", function(e) {
     if (e.target.nodeName.toUpperCase() == "IMG") { return false; }
});
<div onmousedown="event.preventDefault ? event.preventDefault() : event.returnValue = false">asd</div>
<div onmousedown="return false">asd</div>
//also css has selection rules for different browser
相关文章：