Selepas saya membuat fungsi menyeret gambar dalam bekas induk, saya menggunakan transform untuk menukar bekas induk, memutarkannya, meregangkannya, dan lain-lain. Selepas itu, pengiraan koordinat mula bercelaru saya ingin bertanya Saya mahu Apakah yang perlu dia lakukan jika dia bekerja seperti biasa?
Kod seret adalah seperti berikut:
$(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;
})
})
Sejurus selepas memutarkan dragcontain untuk berputar (45deg), ia mula menjadi kucar-kacir, dan koordinat terus ke lebih daripada -1000
Transform rotation dan scaling semuanya mempunyai titik asas, transform-origin