javascript - Problèmes liés au calcul des coordonnées après transformation
Après avoir créé une fonction permettant de faire glisser des images dans le conteneur parent, j'ai utilisé transformer pour changer le conteneur parent, le faire pivoter, l'étirer, etc. Après cela, le calcul des coordonnées a commencé à devenir compliqué. J'aimerais demander si. Je veux Que doit-il faire s'il travaille normalement ?
Le code de glissement est le suivant :
$(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;
}) })
Juste après avoir fait pivoter le dragcontain pour le faire pivoter (45 degrés), cela a commencé à devenir compliqué et les coordonnées sont passées directement à plus de -1000
