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

Question

有人可以告诉我如何在图像的右上角动态叠加图像（在我的情况下是一个图标），无论图像的大小是多少。它需要能够使用可拖动的UI，因此在移动图像时，叠加的图标会保持在其位置。

我是jQuery的新手，我尝试过很多东西，但却无法在一起找到一个有效的例子。最后，图标需要是可链接的，因此我可以为其分配onClick功能。

有人能告诉我一些例子或指出我正确的方向吗？

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

Answer 1

由于您希望图标最终可以点击，我会避免直觉在包含元素上使用: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

Answer 2

将图标置于包含div的左上角（其中包含原始“背景”图像）。使用draggable：http://jqueryui.com/demos/draggable/

拖动div

Answer 3

你能否将它们都包装在“position：relative”div中并使div可拖动？然后将图像的z-index设置为1，将图标设置为2，使其始终位于顶部？然后你可以在图标上使用“position：absolute; right：0px; top：0px”。

与此相似

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

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