問(wèn)題描述

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

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

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

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 ?

其實(shí)我并不關(guān)心與 IE 的兼容性.

Actually i don't care of compatibility with IE.

提前致謝，問(wèn)候

推薦答案

使用jQuery UI原有的拖動(dòng)事件:

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

問(wèn)題是您的問(wèn)題有點(diǎn)不清楚如何處理由此產(chǎn)生的兩種行為(當(dāng)您拖動(dòng)對(duì)象同時(shí)旋轉(zhuǎn)和移動(dòng))的沖突.這個(gè)只是讓鼠標(biāo)的左右移動(dòng)來(lái)決定旋轉(zhuǎn)多少，而默認(rèn)的拖動(dòng)行為(移動(dòng))仍然存在.

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.

我想這有點(diǎn)駭人聽(tīng)聞，但它會(huì)起作用:

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

這篇關(guān)于jQuery - CSS - 通過(guò)拖動(dòng)鼠標(biāo)事件旋轉(zhuǎn) Div的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！