JQuery - CSS - Поворот Div с помощью мыши

Я ищу с нескольких дней без реального результата, может быть, кто-то может помочь мне здесь.

У меня есть div на моей странице (может содержать изображение, текстовую область и т.д.), он можно перетаскивать и изменять размер (благодаря jQuery UI), и я хочу сделать его "поворотным", с ручкой в угол для перетаскивания и поворота с помощью преобразования css (-wekbit-transform, moz-transform)

На самом деле я не забочусь о совместимости с IE.

Ответы

Ответ 1

Использование исходных событий перетаскивания jQuery UI:

$('selector').draggable({
  drag: function(event, ui){
    var rotateCSS = 'rotate(' + ui.position.left + 'deg)';

    $(this).css({
      '-moz-transform': rotateCSS,
      '-webkit-transform': rotateCSS
    });
  }
});

Проблема в том, что ваш вопрос немного неясен в отношении того, как обрабатывается конфликт о двух поведениях (когда вы перетаскиваете объект и поворачивается и перемещается), которые возникают из-за этого. Это просто позволяет движению мыши влево-вправо определить, сколько вращать, в то время как поведение по умолчанию (движение) по-прежнему существует.

Изменить:

Я предполагаю, что это немного хакерский, но он будет работать:

// Your original element
var ele = $('#selector');

// Create handle dynamically
$('<div></div>').appendTo(ele).attr('id','handle').css({
    'position': 'absolute',
    'bottom': 5,
    'right': 5,
    'height': 10,
    'width': 10,
    'background-color': 'orange'
});

ele.css('position', 'relative');

$('#handle').draggable({
    handle: '#handle',
    opacity: 0.01, 
    helper: 'clone',
    drag: function(event, ui){
        var rotateCSS = 'rotate(' + ui.position.left + 'deg)';

        $(this).parent().css({
            '-moz-transform': rotateCSS,
            '-webkit-transform': rotateCSS
        });
    }
});