gpt4 book ai didi

jQuery-ui 可拖动在旋转后更改轴

转载 作者:行者123 更新时间:2023-12-01 04:12:21 24 4
gpt4 key购买 nike

我创建了this fiddle来展示我的问题。请点击旋转按钮尝试移动黄色框(您可以在点击按钮之前进行操作)。

问题很明显 - 旋转拖放后以一种奇怪的方式工作。

我用 Google 搜索了这个问题,但没有找到解决方案。

代码:

html

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<button id="rotator">rotate</button>

<div id="map">
<div class="ball">whee</div>
<div class="ball">heyyy</div>
<div class="ball">hiii</div>
</div>

js

$(function() {
$(".ball").draggable();

$("#rotator").click(function(){
$("#map").css({
WebkitTransform: 'rotate(120deg)',
'-moz-transform': 'rotate(120deg)'
});
});
});

CSS

.ball {width: 100px; height: 100px; background: yellow; border: 1px solid red;}
#map {margin-top: 50px; border: black 1px solid; min-width: 250px; min-height: 250px;}

最佳答案

所以这里的问题是 X 和 Y 轴似乎面向可拖动的父级,这看起来很奇怪......

一个可能的解决方法是使用 appendTohelper 选项,如下所示:

<强> Working Example

$(function () {
$(".ball").draggable({
appendTo: 'body',
helper: 'clone'
});

$("#rotator").click(function () {
$("#map").css({
WebkitTransform: 'rotate(120deg)',
'-moz-transform': 'rotate(120deg)'
});

$(".ball").draggable({
appendTo: 'body',
helper: 'clone',
drag: function () {
$(".ui-draggable-dragging").css({
WebkitTransform: 'rotate(120deg)',
'-moz-transform': 'rotate(120deg)'
});
}
});

});
});

关于jQuery-ui 可拖动在旋转后更改轴,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18813144/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com