問題描述

我搜索了幾天沒有真正的結果，也許有人可以在這里幫助我.

I'm searching since a few day without real result, maybe someone can help me here.

我的頁面上有一個 div(可以包含圖像、文本區域等)，它是可拖動且可調整大小的(感謝 jQuery UI)，我想讓它可旋轉"，并帶有一個句柄使用 css 變換 (-wekbit-transform, moz-transform) 拖動和旋轉角

I've a div on my page (can containt an image, a text area, other), it's draggable and resizable (thanks to jQuery UI), and i want to make it "rotatable", with a handle in a corner to drag and rotate it using css transform (-wekbit-transform, moz-transform)

有可能嗎?使用 jQuery 或其他 Javascript 嗎?

Is it possible ? with jQuery or other Javascript ?

其實我并不關心與 IE 的兼容性.

Actually i don't care of compatibility with IE.

提前致謝，問候

推薦答案

使用jQuery UI原有的拖動事件:

Using jQuery UI's original drag events:

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

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

問題是您的問題有點不清楚如何處理由此產生的兩種行為(當您拖動對象同時旋轉和移動)的沖突.這個只是讓鼠標的左右移動來決定旋轉多少，而默認的拖動行為(移動)仍然存在.

The problem is that your question is slightly unclear about how the conflict about the two behaviors (when you drag the object both rotates and moves around) that arise from this is handled. This one just let the left-right movement of the mouse determine how much to rotate, while the default drag behavior (movement) still exists.

我想這有點駭人聽聞，但它會起作用:

I suppose this is a little hackish but it will work:

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

這篇關于jQuery - CSS - 通過拖動鼠標事件旋轉 Div的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！