我正在制作一个脚本,使用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