jQuery UI перетаскиваемый и вращающийся родитель

Question

jQuery UI перетаскиваемый и вращающийся родитель

0

Я пытаюсь сделать div с кучей детей, вращающихся с помощью этого плагина: https://github.com/trev/Rotatable

Элемент перетаскивается встроенной функцией перетаскивания в пользовательском интерфейсе jQuery. Вот мой код 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>

Единственное, что происходит, это плавающий плагин, который добавляет div с классами "rotatable-handle ui-draggable" каждый раз, когда вы его наводите.

Как бы вы решили это? Вы видите какую-то проблему?

Jimmie Johansson 14 нояб. 2013, в 13:08

Источник

Теги:

javascript

jquery

jquery-ui

1 ответ

Ещё вопросы

Jimmie Johansson · Accepted Answer · 2013-11-21T12-12-00.000Z

Я узнал, что ручка - это то, что я должен использовать.

$(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>