HI全部。我正在使用下面的代碼來旋轉拖放/丟棄的圖像。旋轉工作正常，但是當我開始旋轉時，圖像移動到「div」容器外。任何我想念的東西。jquery包含圖像旋轉的問題

//Moving outside the container for first time.After dragging inside the div,then rotates inside the div 
    var test = 5; 
    var mouseDown = false; 
    $(function() { 
     $('.frame').mousedown(function(e) { mouseDown = true; }); 
     $('.frame').mouseup(function(e) { mouseDown = false; }); 
     $('.frame .rotatable').live('mousemove', function(e) { 
      if ((mouseDown) && (e.ctrlKey)) { 

       test = test + 10; 
       var currentId; 
       document.getElementById('angle').value = test; 
       $(this).rotate({ angle: test }); 
       var currentId = $(this).attr('id'); 
       var id = currentId.substring(8);     
       var deleteimage = 0; 
       var angle = test; 
       saveCoords(e.clientX, e.clientY, angle, id, document.getElementById("<%=trafficID.ClientID%>").value, deleteimage); 
      } 
      $('#frame .rotatable').draggable({ containment: 'parent' }); 

     }); 
    });

HTML

<div id="frame" class="frame" runat="server" style="width:550px; height:400px;background-position:bottom; border:1px solid #000;">

謝謝，

來源

2011-02-09 Vani

旋轉和DIV範圍工作很奇怪，它在我找到的瀏覽器之間有所不同。 – Orbling 2011-02-09 16:50:35

@Orling我正在使用IE – Vani 2011-02-09 17:03:03

維數問題用CSS3旋轉

當DOM元素是使用CSS3變換prope旋轉rties（或等效的瀏覽器特定例程）時，該對象將旋轉到給定的角度，但計算的寬度和高度不會改變。可能是因爲轉換髮生在所有其他重繪事件之後，並且原始大小變量保持原樣。

旋轉不會改變對象的實際大小，但是，在HTML DOM中，所有對象都必須位於矩形邊界框內;此邊界框的大小將改變以適應旋轉圖像的新範圍。

例程即計算在DOM元件的位置趨向於僅僅依靠元件（左&頂部）和所述元件（寬度&高度）的尺寸的位置，因爲所有元件是矩形，這是很好，矩形邊界框與對象本身是一樣的。當項目旋轉時，這種情況不再是真實的，因此例程不再正常工作，因爲邊界框的寬度和高度可能與對象本身不同。

旋轉與包圍盒

Rotation with Bounding Box

邊框的寬度和高度是很簡單的數學計算，有一個question some time ago on this topic，由卡薩布蘭卡陳述數學的方法計算給出一個答案新的寬度和高度。（他還指出如何計算新的位置，但與CSS rotatation，除非你改變旋轉的起源，左/上保持不變。）

Rectangle Rotation - New Dimensions

最大範圍由對角線給出矩形：

Diagonal of a Rectangle

基礎上OP上面給的代碼，我創建的這一點示範作用 - 注意邊界框的大小，因爲它旋轉，並且.draggable()容器是如何失敗的在wh範圍內包含項目它超出了原來的尺寸。

廣場演示：http://jsfiddle.net/pkHFZ/
矩形演示：http://jsfiddle.net/pkHFZ/2/

來源

2011-02-10 01:49:13 Orbling

作爲替代@Orblings答案不需要任何額外的JavaScript，數學或計算。

不是將對象同時拖動和旋轉，而是將其分割爲可拖動的容器和可旋轉的子對象。

<div class="container"> 
    <span class="draggable-element"> 
     <span class="rotatable-element"></span> 
    </span> 
</div>

通過這樣做，你的拖動元素一直陪着一個固定的邊框，而其唯一的子元素的邊框改變夷爲平地。由於這一個不限於container，它仍然可以在外面。

來源

2017-04-11 03:35:39

jquery包含圖像旋轉的問題

回答

維數問題用CSS3旋轉

相關問題