jQuery将可链接的图像图标动态放置在可拖动的图像上

有人可以告诉我如何在图像的右上角动态叠加图像(在我的例子中是图标(，无论该图像的大小如何。它需要能够与可拖动的 UI 一起使用，以便在移动图像时，覆盖的图标将保留在其位置。

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

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

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

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

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

然后我会将容器样式设置为inline-block，以便它与其子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" );
});

演示：http://jsbin.com/ihugas/3/edit

将

图标放置在包含div(包含原始"背景"图像(的绝对左上角。使用可拖动的div：http://jqueryui.com/demos/draggable/拖动div

你能不能把它们都包装在一个"位置：相对"div 中并使div 可拖动？然后将图像的 z 索引设置为 1，将图标设置为 2，以便它始终位于顶部？然后，您可以只使用"位置：绝对;右：0px;顶部：0px"图标上。

如此相似

http://jsfiddle.net/qJHuf/1/

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

相关内容