javascript - jQuery UI 可拖动和可旋转的父级

Question

我正在尝试使用这个插件制作一个带有一堆孩子的 div：https ://github.com/trev/Rotatable

该元素可通过 jQuery UI 中内置的可拖动功能进行拖动。这是我的 jQuery 代码。

$(document).on('mouseover', '.case .input', function(){
    $(this).draggable({handle:'.drag'});
    $(this).children('.resize.tl').parent().rotatable({ autoHide: false });
});

这是我的标记。

<div class="case">
    <div class="case_background"></div>
    <div class="case_model">

        <!-- This is loaded by ajax -->
        <div class="input" data-name="'+n+'">
            <div class="drag">
                <div class="icon"></div>
            </div>
            <div class="resize tl">
                <div class="topleft"></div>
            </div>

            <input class="casetext opensans" type="text" name="textfield[]" size="25" value="The text">
        <!-- End of ajax load -->
        </div>
    </div>
</div>

唯一发生的事情是可旋转插件在每次悬停时都会添加带有“可旋转手柄 ui-draggable”类的 div。

你会如何解决这个问题？你看有什么问题吗？

Answer 1

我发现手柄是我应该使用的。

$(document).on('mouseover', '.case .input, .case .image', function(){
    var tc = $(this);
    tc.rotatable({
        handle:tc.children('.rotate.left, .rotate.right')
    });
    return true;
});



<div class="case">
    <div class="case_background"></div>
    <div class="case_model">

        <!-- This is loaded by ajax -->
        <div class="input" data-name="'+n+'">
            <div class="drag">
                <div class="icon"></div>
            </div>
            <div class="rotate left">
                <div class="icon"></div>
            </div>
            <div class="rotate right">
                <div class="icon"></div>
            </div>

            <input class="casetext opensans" type="text" name="textfield[]" size="25" value="The text">
        <!-- End of ajax load -->
        </div>
    </div>
</div>