[英]Raphael.JS: How drag and drop image dom elements in raphael paper
我有带有图像集的html工具箱。 我想将它们拖放到Raphael画布上。 使用jquery ui或html5我想我可以拖放,但是当放置时,如何使该工具箱html元素(图像)拉斐尔对象呢?
我需要像这样将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);
}
最简单的方法可能是使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.