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

我正在制作一个脚本，使用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坐标之前，浏览器会将动画返回到原始位置-在它跳到正确的位置之后。这是一只漂亮的虫子！如何防止浏览器在发布后制作动画？我尝试了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

$（“img”）.mousedown（函数（）{return false；}）；
$（document）.on（“dragstart”，function（）{return false；}）；
$（文档）.on（“dragstart”，函数（e）{
if（e.target.nodeName.toUpperCase（）==“IMG”）{return false；}
});
自闭症
自闭症
//css也有不同浏览器的选择规则

谢谢，但这次我不使用jQuery。另外，我正在通过addEventListener方法实现事件。