请查看我的jsfiddle以了解我的问题: 黄色是你可以通过使用红色圆圈旋转的父div,它也是可拖动的,在这个div中有另一个带有黑色边框的div,我们可以将其视为对蓝色圆圈的遏制。 蓝圈可以在收容边界内拖动,只需要y坐标,如果旋转黄色div ex就会出现问题; 90度或更高,鼠标坐标与预期的拖动位置不匹配,我试图通过使用三角函数和反转轴来解决问题,但它是徒劳的,我希望有人可以解决这个并留下一个jsfiddle工作样本非常受欢迎。请不要将我引导到其他帖子,因为我认为我已经阅读了与此问题相关的所有内容'
HTML
<div id="container">
<div id="containment">
<div id="circle"></div>
</div>
</div>
CSS
#container{width:100px;
height:140px;
background:#FFEB3B;
position:absolute;
top:50%;
bottom:50%;
margin-top:-70px;
margin-right:-50px}
.ui-rotatable-handle {
height: 30px;
width: 30px;
cursor: pointer;
background:#ff0000;
border-radius:50%;
right: -15px;
bottom: -15px;
position:absolute;
z-index:1}
#containment{width:30px;
height:190px;
position:absolute;
bottom:70px;
left:35px;
border:solid 1px #000}
#circle{width:30px;
height:30px;
position:absolute;
top:0;
left:0;
border-radius:50%;
background:#3F51B5}
的JavaScript
$(function(){
$('#container').draggable().rotatable();
$('#circle').draggable({containment: $('#containment')
});
});
答案 0 :(得分:0)
我发现它的唯一方法是添加“假”矩形并以所需的度数显示它。我只为 45deg+ 添加了 1 个假矩形,但您也可以通过相同的逻辑为 90deg+ 和 115deg+ 添加其他 2 个。请参阅此处的 solution。
HTML
<div id="container">
<div id="containment">
<div id="circle" class="circle"></div>
</div>
<div id="containment2">
<div id="circle2" class="circle">
</div>
</div>
</div>
CSS
#container {
width: 100px;
height: 140px;
background: #FFEB3B;
position: absolute;
top: 50%;
bottom: 50%;
margin-top: -70px;
margin-right: -50px;
}
.ui-rotatable-handle {
height: 30px;
width: 30px;
cursor: pointer;
background: #ff0000;
border-radius: 50%;
right: -15px;
bottom: -15px;
position: absolute;
z-index: 1;
}
#containment,
#containment2 {
width: 30px;
height: 190px;
position: absolute;
bottom: 70px;
left: 35px;
border: solid 1px #000
}
#containment2 {
width: 190px;
height: 30px;
left: 51px;
bottom: 54px;
transform: rotate(-90deg);
border: solid 1px green;
transform-origin: left;
display: none;
}
.circle {
width: 30px;
height: 30px;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
background: #3F51B5;
z-index: 10;
}
#circle2 {
left: calc(100% - 30px);
display: none;
}
#wrapper {
width: 100%;
height: 100%;
outline: 1px solid red;
}
JavaScript
$(function() {
var Pi = 3.14;
$('#container').draggable({}).rotatable({
rotate: function(event, ui) {
let deg = ui.angle.current * 180 / Pi;
$("#containment").show();
$("#containment2").hide();
$("#circle").show();
$("#circle2").hide();
if (deg > 45) {
$("#containment").hide();
$("#containment2").show();
$("#circle").hide();
$("#circle2").show();
}
},
});
$('#circle').draggable({
stop: function(event, ui) {
console.log(ui.position.top);
$("#circle2").css("inset", ui.position.left + "px auto auto " + (160 - ui.position.top) + "px");
},
containment: $('#containment')
});
$('#circle2').draggable({
stop: function(event, ui) {
$("#circle").css("inset", 160 - ui.position.left + "px auto auto " + ui.position.top + "px");
},
containment: $('#containment2')
});
});
答案 1 :(得分:-1)
我在 rtl 应用程序中遇到了一些与 JQuery 类似的问题。原因是由于布局的方向使用了 left
css 定位 - 缺少 right
并且计算出错。
在创建元素时添加它们解决了它。