Question

我正在制作一个脚本，使用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（）但是没有用......

Answer 1

搜索“在浏览器中停止拖动图片”，您将得到答案。

$("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

javascript：通过eventListener拖动图像时的视觉问题

1 个答案: