javascript – Probleme mit der Koordinatenberechnung nach der Transformation
Nachdem ich eine Funktion zum Ziehen von Bildern im übergeordneten Container erstellt habe, habe ich den übergeordneten Container mithilfe von „Transformieren“ geändert, gedreht, gestreckt usw. Danach wurde die Berechnung der Koordinaten unordentlich. Ich würde gerne fragen, ob Ich möchte: Was soll er tun, wenn er normal arbeitet?
Der Ziehcode lautet wie folgt:
$(function(){
var dragging = false;
var iX, iY;
var qX, qY;
var tempid;
$(".dragcontain").mousedown(function(e) {
dragging = true;
iX = accSub(e.clientX,this.offsetLeft);
iY = accSub(e.clientY,this.offsetTop);
qX = $(e.target).children().position().left;
qY = $(e.target).children().position().top;
console.log(qX,qY);
console.log(iX,iY);
this.setCapture && this.setCapture();
return false;
});
document.onmousemove = function(e) {
if (dragging) {
var e = e || window.event;
console.log("sX:",e.clientX,"sY:",e.clientY);
var nX = accSub(e.clientX,e.target.offsetLeft);
var nY = accSub(e.clientY,e.target.offsetTop);
console.log(e.clientX,e.target.offsetLeft)
var mX = accSub(nX,iX);
var mY = accSub(nY,iY);
var oX = accAdd(qX,mX);
var oY = accAdd(qY,mY);
$(e.target).children().css({"left":oX + "px", "top":oY + "px"});
console.log("iX:",iX,"iY:",iY);
console.log("oX:",oX,"oY:",oY);
console.log("nX:",nX,"nY:",nY);
console.log("mX:",mX,"mY:",mY);
console.log("qX:",qX,"qY:",qY);
console.log("");
return false;
}
};
$(document).mouseup(function(e) {
dragging = false;
e.cancelBubble = true;
iX=0;
iY=0;
}) })
Unmittelbar nachdem ich den DragContainer gedreht hatte, um ihn zu drehen (45 Grad), wurde es unordentlich und die Koordinaten stiegen direkt auf über -1000
