Question

我正在开发一个项目，里面有一些可拖动的内容。所有可拖动的图像都具有透明的部分并与其他内容重叠。

我在JSFiddle上设置了一个示例：Draggable Example

<body>
    <p>The background is transparent, but if you grab ANYWHERE in the border you can drag the image around.</p>
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Jupiter_(transparent).png/484px-Jupiter_(transparent).png"></img>
</body>

img{
   border: solid black 1px;
}

在示例中，您可以通过在图像边框内的任何位置按住鼠标左键来抓取图像，即使它们是透明的。在这个例子中，我的目标是只有在你抓住行星木星的可见部分时才能拖动图像。

这可能在html中吗？

Answer 1

根据您在上述评论中的澄清，在canvas元素中绘制图像可能最简单。您可以按照此SO帖子Make image drawn on canvas draggable with JavaScript中的说明向画布添加可拖动性。并且只有当非透明像素位于单击位置时，您才可以修改它以触发拖动标记。

你如何使图像的一部分不可分割？

1 个答案: