gpt4 book ai didi

javascript - 如何使图像的一部分不可拖动?

转载 作者:行者123 更新时间:2023-11-28 08:03:54 25 4
gpt4 key购买 nike

我正在开发一个元素,其中包含一些可拖动的内容。所有可拖动的图像都有透明部分并与其他内容重叠。

我在 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 中可能吗?

最佳答案

根据您在上面评论中的说明,在 canvas 元素中绘制图像可能是最简单的。您可以按照此 SO 帖子中的说明向 Canvas 添加可拖动性:Make image drawn on canvas draggable with JavaScript .并且您可以修改它以仅当非透明像素位于单击位置时才触发拖动标志。

关于javascript - 如何使图像的一部分不可拖动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29586615/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com