HTML5將圖像從工具欄拖放到畫布上

Question

我搜索了很多，但找不到與我的需求相關的場景。我想將圖像從工具欄拖放到畫布，而不是從畫布拖放到另一個畫布。

請幫我解決這個問題。在此先感謝

Answer 1

演示：http://jsfiddle.net/m1erickson/2Us2S/

使用jQuery UI的創建可拖動的元素。

$("#myToolbarImageElement").draggable(); 

加載這些元素與數據有效載荷是鍵值對。

在你的情況下，這可能是你想要在畫布上繪製的圖像對象。

$("#myToolbarImageElement").data("image",myImageObject); 

設置畫布的拖放區：

$("#myCanvas").droppable({drop:myDropHandler}); 

當你把畫布元素，你可以讀取數據（圖像）和drawImage方法是像在畫布上。

function myDropHandler(e,ui){ 
    var x = ui.offset.left - $("#myCanvas").offset.left; 
    var y = ui.offset.top - $("#myCanvas").offset.top; 
    var image = ui.draggable.data("image"); 
    // draw on canvas 
    drawImage(image,x,y); 
} 

下面是關於使用jQuery UI的數據有效載荷拖放元素一個很好的教程：

http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/