jQuery - CSS - Поворачивает Отделение на событие от нажатия мыши перетаскивания
Я ищу начиная с некоторых день без реального результата возможно, кто-то может помочь мне здесь.
У меня есть отделение на моей странице (может containt изображение, текстовая область, другой), это перемещаемо и изменяемого размера (благодаря jQuery UI), и я хочу сделать это "поворотным" с дескриптором в углу для перетаскивания, и вращаться это с помощью CSS преобразовывает (-wekbit-преобразовывают, moz-преобразовывают),
Действительно ли это возможно? с jQuery или другим JavaScript?
На самом деле я не забочусь о совместимости с IE.
Заранее спасибо, Отношения
1 ответ
Использование исходных событий перетаскивания пользовательского интерфейса jQuery. :
$('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
});
}
});