Javascript 如何在使用jquery拖动元素时旋转长方体div

我知道我们需要使用

transform:rotate（ndeg）

以旋转CSS中的特定元素。在这种情况下，我希望动态地执行它。使用jQuery，我想在用户拖动n度上的手柄（红色背景）时，按照用户的意愿旋转box/container div。在jQuery中可能吗

正文{
填充：50px；
}
.box_元素{
边框：1px纯黑；
宽度：200px；
高度：200px；
位置：相对位置；
z指数：-1；
}
.处理{
位置：绝对位置；
底部：-10px；
右：-10px；
宽度：10px；
高度：10px；
边框：1px实心；
背景：红色；
z指数：10；
}

这是测试

您可以使用，然后在单击时更改变量的值

const-box\u-element=document.getElementById（'box\u-element'）；
const handle=document.getElementById（'handle'）；
handle.addEventListener（'click'，function（）{
让currentVal=getComputedStyle（box_元素）.getPropertyValue（'--rotate_deg'）；
box_element.style.setProperty(
“--旋转度”（（当前值替换（'deg'，''）+90）%360）+'deg'）；
});
：根目录{
--旋转度：0度；
}
.box_元素{
边缘：1米；
边框：1px纯黑；
宽度：100px；
高度：100px；
位置：相对位置；
z指数：-1；
变换：旋转（var（--rotate_deg））
}
.处理{
位置：绝对位置；
底部：-10px；
右：-10px；
宽度：10px；
高度：10px；
边框：1px实心；
背景：红色；
z指数：10；
光标：指针；
}

这是测试
在这里，您只需编写少量代码即可，请尝试使用实时代码


var停止，
活动=错误，
角度=0，
旋转=0，
startAngle=0，
中心={
x:0,，
y:0
},
R2D=180/Math.PI；
功能启动（e）{
e、 预防默认值（）；
var bb=this.getBoundingClientRect（），
t=bb.top，
l=bb.左，
h=bb.高度，
w=bb.宽度，
x,，
Y
中心={
x:l+w/2，
y:t+h/2
};
x=e.clientX-center.x；
y=e.clientY-center.y；
startAngle=R2D*Math.atan2（y，x）；
返回（活动=真）；
}
函数旋转（e）{
e、 预防默认值（）；
var x=e.clientX-center.x，
y=e.clientY-center.y，
d=R2D*数学常数2（y，x）；
旋转=d-星形缠结；
返回（rot.style.webkitttransform=“旋转”（+（角度+旋转）+“度”）；
}
函数停止（）{
角度+=旋转；
返回（活动=假）；
}
rot=document.getElementById（“可拖动”）；
rot.addEventListener（“mousedown”，start，false）；
addEventListener（“mousemove”，函数（事件）{
如果（活动===真）{
event.preventDefault（）；
轮换（活动）；
}
});
window.addEventListener（“mouseup”，函数（事件）{
event.preventDefault（）；
停止（事件）；
});

#可拖动{
左：50px；
顶部：50px；
宽度：100px；
高度：100px；
位置：相对位置；
边框：1px实心#000；
} 
#可拖动：以前{
内容：“；
位置：绝对位置；
底部：-5px；
右：-5px；
宽度：10px；
高度：10px；
背景：#f00；
}

此解决方案可能仅适用于单击事件。但是如果红色被拖动了怎么办？当红色拖动
n
度时，框应旋转。您需要在拖动事件中对
n
进行必要的计算。这里的操作是动态更改
n
单击事件是否正常。但是
拖动
事件怎么样？用户应该在按住鼠标的同时单击
red
元素，然后拖动
n
度。我想这应该是另一个问题，如何使用另一个div拖动和旋转。这里的帖子是如何直接改变角度。您需要确保OP针对一个问题而不是多个问题。谢谢您的回答。但这只是一个问题。主要问题是如何以
n
度旋转主框。当然，如果不单击并拖动，则无法旋转。不单击就不能拖动。因此，用户应该先单击，然后拖动。我希望这听起来很清楚。