js:如何在拉斐尔纸上拖放图像元素
Raphael.JS: How drag and drop image dom elements in raphael paper
我有html工具箱与一组图像。我想把它们拖放到拉斐尔画布上。使用jquery ui或html5我想我可以拖放,但如何使工具箱html元素(图像)拉斐尔对象,当它被放下?
我需要像这样传递html元素给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拖放并使您的函数成为handler
on 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>
相关文章:
- 使用jquery拖放图像
- 从imgur api的另一个浏览器拖放图像
- 接受从另一个浏览器窗口拖放图像
- HTML5拖放 - 图像不会覆盖
- 使用某种ID跟踪拖放图像
- 在 JS 中拖放图像
- HTML5 仅拖放图像
- 拖放图像并将其上传到多个文件夹
- 在Visual Basic中从浏览器窗口拖放图像时捕获图像url
- 如何实现拖放图像
- HTML5拖放图像在Chromium(和Opera)中获得水平偏移
- js中拖放图像的数组事件侦听器
- 如何在拖放操作中删除被拖放图像的属性
- 使用两个数据器拖放图像
- 拖放图像&上传插件的时间
- HTML5原生拖放图像,而不是边框
- js:如何在拉斐尔纸上拖放图像元素
- 拖放图像不工作在tinymce文本编辑器
- CKEditor -拖放图像到字幕图像
- 如何保存位置的拖放(图像,按钮,文本,段落)在php,mysql