jquery - jQuery 在可拖动图像上动态定位可链接图像图标

Question

有人可以告诉我如何在图像的右上角动态叠加图像（在我的例子中是一个图标），无论该图像的大小是多少。它需要能够使用可拖动的 ui，以便在移动图像时，覆盖的图标保持在其位置。

我对 jQuery 相当陌生，我尝试了很多东西，但无法一起获得一个有效的示例。最后，该图标需要可链接，以便我可以为其分配 onClick 功能。

谁能给我一些例子或指出正确的方向？

我正在使用最新版本的 jQuery。

score 1 · Accepted Answer

由于您希望图标最终可点击，因此我会避免使用:after包含元素来显示图标的直觉。相反，我会使用一个简单的div包装器，其中包含可拖动的图像和里面的图标：

<div class="draggable-image">
  <img src="http://placekitten.com/100/100" />
  <img src="help.png" class="icon" />
</div>

然后我将容器的样式设置为inline-block，以便它匹配其 child 的宽度（和高度，在大多数情况下）img。这也是在容器中放置图标的好时机：

.draggable-image {
  position: relative;
  display: inline-block;
}
.draggable-image img.icon {
  position: absolute;
  top: 10px;
  right: 10px;
}

ui.helper现在我们可以绑定可拖动事件，从提供给我们各种可拖动方法的对象中引用可拖动图像：

$(".draggable-image").draggable({
  stop: function( event, ui ) {
    alert( $("img:first", ui.helper).attr("src") );
  }
});

注意我正在访问:first图像，避免我们的.icon图像。最后，我们可以将一些点击逻辑绑定到我们的.icon，以便我们可以对人们点击它做出反应：

$(".draggable-image .icon").on("click", function(){
  alert( "You've clicked the icon" );
});

score 0 · Accepted Answer

将图标定位在包含 div 的绝对左上角（它包含原始的“背景”图像）。使用 draggable 拖动 div：http: //jqueryui.com/demos/draggable/

score 0 · Accepted Answer

您不能将它们都包装在“位置：相对”的 div 中并使 div 可拖动吗？然后将图像的 z-index 设置为 1 并将图标设置为 2 以便它始终位于顶部？然后，您可以在图标上使用“位置：绝对；右：0px；顶部：0px”。

如此相似

但是 .image div 将是一个图像，而 .holder 将是可拖动的

3 回答 3