Raphael.JS：如何在raphael paper中拖放图像dom元素

Question

我有 html 个带有图像集的工具箱。我想将它们拖放到 raphael canvas。使用 jquery ui 或 html5 我想我可以拖放，但是当它被拖放时如何使工具箱 html 元素（图像）raphael 对象？

我需要像这样将 html elem 传递给 raphael 的函数：

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 拖放并使您的函数成为 drop 事件上的 handler。您可以将 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>

Raphael.JS：如何在raphael paper中拖放图像dom元素

Raphael.JS: How drag and drop image dom elements in raphael paper

html

javascript

jquery

drag-and-drop

raphael