拖動和旋轉容器內的圖像

Question

我能夠旋轉圖像克隆，但它重新定位在div的一側。是否有可能顯示在div內旋轉圖像。這裏是jsfiddle的鏈接：http://jsfiddle.net/T6nn5/5/ 但旋轉插件不包括在這裏，所以，圖像將不會旋轉。

Answer 1

我認爲問題在於頁面已設置，因此用戶將圖像克隆拖放到網格上。當你點擊圖片時，旋轉插件被調用並用<span><canvas><canvas></span>（至少在Firefox中）替換該圖片。這是拖放功能停止工作的原因。

圖像使用「絕對」定位進行定位，並且畫布使用「相對」定位進行定位，這就是爲什麼它最終位於網格下方。

我還沒有測試過這個，但我認爲解決方案是將圖像打包成一個<span>，其中應用了拖放功能。我不知道旋轉後的畫布是否會再次被包裹在相對定位的<span>中。所以即使在這個建議的變化之後，仍然可能存在定位問題。

在一個側面說明，在畫布上點擊時，螢火報告這個錯誤：

$(this).rotate({angle: test, containment: "working-area"}).parent is not a function [Break On This Error] Failed to load source for: http://usha...ng_Conveyors/build.php?num1=50&num2=50 build....num2=50 (line 624)

---

更新：在這裏你去，updated demo和代碼：

HTML

<li> 
    <span class="draggable"> 
     <img class="rotatable" src="http://www.bootheyankees.com/images/GoogleIcon.png"/> 
    </span> 
</li> 

腳本

$(document).ready(function() { 
    $('#dhtmlgoodies_xpPane .draggable').draggable({ 
     scope: "draggable", 
     helper: "clone" 
    }); 
    $('#working-area .rotatable').live('click', function(event) { 
     test = test + 90; 
     $(this).rotate({ 
      angle: test, 
      containment: "working-area" 
     }); 
    }); 
    $("#working-area").droppable({ 
     activeClass: "ui-state-default", 
     hoverClass: "ui-state-hover", 
     accept: "#dhtmlgoodies_xpPane li .draggable", 
     drop: function(event, ui) { 
      $(this).append($(ui.helper).clone().draggable()); 

     }, 
     scope: "draggable" 
    }).mousemove(function(e) { 
     var x = e.pageX - this.offsetLeft; 
     var y = e.pageY - this.offsetTop; 
     $('#status2').html("X = " + x + ', ' + "Y = " + y); 
    }); 
}); 

Answer 2

當您拖動圖片時，您點擊該圖片後的樣式爲position: absolute; left: 745.5px; top: 788px;，樣式爲position: relative; left: -0.310859px; top: -43.3109px;。我不知道你的插件做什麼，但我認爲你應該寫你自己的jQuery代碼。這當然會產生一個錯誤。