作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有带有图像集的 html 工具箱。我想将它们拖放到拉斐尔 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);
}
最佳答案
最简单的方法可能是使用 HTML 拖放,并使您的函数成为 drop
事件的处理程序
。您可以将 drop 事件
添加到 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>
关于javascript - 拉斐尔.JS : How drag and drop image dom elements in raphael paper,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32422527/
我是一名优秀的程序员,十分优秀!