jQuery - CSS - Поворот Div с помощью перетаскивания мышью

Question

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

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

Является ли это возможным ?с jQuery или другим Javascript?

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

Заранее спасибо, С уважением

Answer 1

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

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

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

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

Edit:

Полагаю, это немного хакерски, но это сработает:

// 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
        });
    }
});