Raphael.JS：如何拖放圖像DOM元素在拉斐爾紙

Question

我有html工具箱的圖像集。我想將它們拖放到raphael畫布上。使用jQuery UI或HTML5我想我可以拖放，但如何使該工具箱HTML元素（圖像）拉斐爾對象時，它被刪除？

我需要經過HTML ELEM功能拉斐爾這樣的：

var r = Raphael(0, 0, 800, 800); 

raiseMeWhenDropped(html_elem, e) { 
    // create image on canvas area when dropped from toolbox 
    r.image(html_elem.src, e.mouseXdropped, e.mouseYdropped, 30, 30); 
} 

Answer 1

最簡單的方法很可能是使用HTML拖放，讓您的功能handler上drop事件。您可以將drop event添加到paper的canvas元素中。像這樣的例子：

var r = Raphael(0, 60, 800, 800); 
 
var canvas = r.canvas; 
 
var dragImage = document.getElementById('test'); 
 

 
dragImage.addEventListener('dragstart', function (e) { 
 
    dragEvent = e; 
 
}); 
 

 
canvas.addEventListener('dragover', function (e) { 
 
    e.preventDefault(); 
 
}); 
 

 
canvas.addEventListener('drop', function (e) { 
 
    e.preventDefault(); 
 
    r.image(dragEvent.target.src, e.offsetX - dragEvent.offsetX, e.offsetY - dragEvent.offsetY, dragEvent.target.clientWidth, dragEvent.target.clientHeight); 
 
})

svg 
 
{ 
 
    background-color: #ddd; 
 
} 
 

 
img 
 
{ 
 
    cursor: pointer; 
 
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> 
 

 
<img draggable="true" id="test" src="https://www.gravatar.com/avatar/a4d924e65b84f1572ea3598437aa5559?s=48&d=identicon&r=PG&f=1" /><span>You can drop the image on the grey zone</span>