Question

我已创建this fiddle来证明我的问题。请单击旋转按钮尝试移动黄色框（您可以在单击按钮之前执行此操作）。

问题很明显 - 旋转后拖动＆amp;以奇怪的方式放弃工作。

我用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;}

Answer 1

所以这里遇到的麻烦是X和Y轴似乎是朝向可拖动的父级，这看起来很奇怪......

可能的解决方法是使用appendTo和helper选项，如下所示：

<强> 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 draggable在旋转后改变轴

1 个答案: