极客观点
项目管理
HarmonyOS
页面有一div，页面上操作transform: rotate(70deg)旋转后，
我要拖动这div，mousedown点击时，div会偏移出点击的位置?
这是什么原因造成的，有什么解决方法
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>元素拉伸改变大小</title>
<style type="text/css">
#dragDiv {
width: 250px;
height: 250px;
background-color: #fff;
border: 1px solid #ccc;
position: absolute;
top: 200px;
left: 300px;
-webkit-box-shadow: 0px 0px 15px #ccc;
-moz-box-shadow: 0px 0px 15px #ccc;
box-shadow: 0px 0px 15px #ccc;
background-color: #84bb3d;
}
</style>
</head>
<body>
<button onclick="deg()">旋转角度60deg</button></br>
<div id="dragDiv"></div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
window.onload = function() {
$("#dragDiv").Drag();
$("#dragDiv").Resize();
}
$.fn.extend({
//拖动
Drag: function() {
$(this).attr("isDrag", 1);
$(this).mousedown(function(e) {
if ($(this).attr("isDrag") == 0) return;
$(this).attr("drag", 1);
$(this).css("position", "absolute");
$(this).css("cursor", "default");
var currentTarget = $(this);
var currentDisX = e.pageX - $(this).offset().left;
var currentDisY = e.pageY - $(this).offset().top;
$(document).mousemove(function(event) {
if ($(currentTarget).attr("drag") == 0 || $(currentTarget).attr("mode") == "re") return;
var currentX = event.clientX;
var currentY = event.clientY;
var cursorX = event.pageX - currentDisX; //+$(this).offset().left;
var cursorY = event.pageY - currentDisY; //-$(this).offset().top;
$(currentTarget).css("top", cursorY + "px").css("left", cursorX + "px");
});
$(document).mouseup(function() {
$(currentTarget).attr("drag", 0);
});
});
},
DisDrag: function() {
$(this).attr("isDrag", 0);
$(this).attr("drag", 0);
},
//上下左右加四个角
Resize: function() {
var currentDisTance = 5;
var resizeMode = 0;
var isResize=false;
var isStartResize=false;
//鼠标移动到出现的样式
$(this).mousemove(function(e) {
var currentDisX = e.pageX - $(this).offset().left;
var currentDisY = e.pageY - $(this).offset().top;
if ($(this).width() - currentDisX < currentDisTance && ($(this).height() - currentDisY) < currentDisTance) {
$(this).css("cursor", "nw-resize");//右下
} else if ($(this).width() - currentDisX < currentDisTance && (currentDisY < currentDisTance)) {
$(this).css("cursor", "ne-resize");//右上
}else if(currentDisX < currentDisTance && ($(this).height() - currentDisY) < currentDisTance){
$(this).css("cursor", "ne-resize");//左下
}else if (currentDisX < currentDisTance && currentDisY < currentDisTance) {
$(this).css("cursor", "nw-resize");//左上
}else if (currentDisY < currentDisTance) {
$(this).css("cursor", "n-resize");//上边
} else if ($(this).height() - currentDisY < currentDisTance) {
$(this).css("cursor", "n-resize");//下边
} else if(currentDisX < currentDisTance){
$(this).css("cursor", "e-resize");//左边
}else if ($(this).width() - currentDisX < currentDisTance) {
$(this).css("cursor", "e-resize");//右边
} else {
$(this).css("cursor", "Move");
if(isStartResize==true)return;
}
});
//鼠标点下出现的样式加修改大小
$(this).mousedown(function(e) {
isResize=true;
var currentDisX = e.pageX - $(this).offset().left;
var currentDisY = e.pageY - $(this).offset().top;
if ($(this).width() - currentDisX < currentDisTance && ($(this).height() - currentDisY) < currentDisTance) {
$(this).css("cursor", "nw-resize");//右下
$(this).attr("mode", "re");
resizeMode = 0;
}else if ($(this).width() - currentDisX < currentDisTance && (currentDisY < currentDisTance)) {
$(this).css("cursor", "ne-resize");//右上
$(this).attr("mode", "re");
resizeMode = 3;
}else if(currentDisX < currentDisTance && ($(this).height() - currentDisY) < currentDisTance){
$(this).css("cursor", "ne-resize");//左下
$(this).attr("mode", "re");
resizeMode = 4;
}else if (currentDisX < currentDisTance && currentDisY < currentDisTance) {
$(this).css("cursor", "nw-resize");//左上
$(this).attr("mode", "re");
resizeMode = 5;
} else if ($(this).width() - currentDisX < currentDisTance ) {
$(this).css("cursor", "e-resize");//右边
$(this).attr("mode", "re");
resizeMode = 1;
} else if ($(this).height() - currentDisY < currentDisTance) {
$(this).css("cursor", "n-resize");//下边
$(this).attr("mode", "re");
resizeMode = 2;
}else if (currentDisY < currentDisTance) {
$(this).css("cursor", "n-resize");//上边
$(this).attr("mode", "re");
resizeMode = 6;
}else if(currentDisX < currentDisTance){
$(this).css("cursor", "e-resize");//左边
$(this).attr("mode", "re");
resizeMode = 7;
}else {
if(isStartResize==true)return;
$(this).css("cursor", "default");
$(this).attr("mode", "me");
}
var currentTarget = $(this);
var offsetWidth=$(this).width()-$(currentTarget).offset().left;
var offsetHeight=$(this).height()-$(currentTarget).offset().top;
var currentW=$(this).width() + $(currentTarget).offset().left;
var currentH=$(this).height() + $(currentTarget).offset().top;
var currentT=$(currentTarget).offset().top,curremtL=$(currentTarget).offset().left;
//$(this).css("width",currentWidth+currentDisX);
$(document).mousemove(function(event) {
if ($(currentTarget).attr("mode") == "me"||isResize==false) return;
isStartResize=true;
var currentX = event.clientX;
var currentY = event.clientY;
var cursorX = event.pageX - currentDisX; //+$(this).offset().left;
var cursorY = event.pageY - currentDisY; //-$(this).offset().top;
//console.log("W: "+offsetWidth+" +H: "+offsetHeight);
//console.log("ceX: "+currentX+"ceY: "+currentY);
//console.log("csX: "+cursorX+"csY: "+cursorY);
if (resizeMode == 0) {
$(currentTarget).css("height", cursorY+offsetHeight + "px").css("width", cursorX+offsetWidth + "px");//右下
}else if (resizeMode == 1){
$(currentTarget).css("width", cursorX+offsetWidth + "px");//右边
}else if(resizeMode == 2){
$(currentTarget).css("height", cursorY+offsetHeight + "px");//下边
}else if (resizeMode == 3){
$(currentTarget).css("height", currentH - event.pageY + "px").css("width", cursorX+offsetWidth + "px").css("top",currentY + "px");//右上
}else if (resizeMode == 6){
$(currentTarget).css("height", currentH - event.pageY + "px").css("top",currentY +"px");//上边
}else if (resizeMode == 7){
$(currentTarget).css("width", currentW - event.pageX + "px").css("left",currentX + "px");//左边
}else if (resizeMode == 4){
$(currentTarget).css("height", cursorY+offsetHeight + "px").css("width", currentW - event.pageX + "px").css("left",currentX+ "px");//左下
}else if (resizeMode == 5){
$(currentTarget).css("height", currentH - event.pageY + "px").css("width", currentW - event.pageX + "px").css("left",currentX + "px").css("top",currentY + "px");//左上
}else {console.log("无效");}
});
});
$(document).mouseup(function() {
isResize=false;
isStartResize=false;
});
}
});
function deg(){
var div=document.getElementById("dragDiv");
div.style.transform="rotate(60deg)";
}
</script>
</html>
修改出来的 源码不是这样的，需求是这样
html5
用原生的好像可以？？