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

有人能告诉我如何动态覆盖图像右上角的图像（图标在我的情况下），无论图像的大小如何。它需要能够使用可拖动的用户界面，因此当图像被移动时，被覆盖的图标保持在其位置上。jQuery动态地将可链接图像图标定位在可拖动图像

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

任何人都可以给我看一些例子，或者指出我朝着正确的方向吗？

我使用的是最新版本的jQuery。

2012-05-17 Jared

由于您希望图标最终可点击，因此我会避免使用含有元素的:after来显示图标。所以，它的宽度（和高度匹配，为最

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

然后我会样式的容器是inline-block，：相反，我会用一个简单的div包装既您拖动图像，和里面的图标部分）其子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

来源

2012-05-17 13:47:23 Sampson

这也不错！如果图片/ div的大小是动态的呢？我将如何解释这一点？谢谢您的帮助！ – Jared

@ user993514在我的答案底部查看我的更新。 – Sampson

谢谢！这变得如此接近。测试这段代码我看到图标不在右上角。我将如何动态地影响图标的位置？ – Jared

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

来源

2012-05-17 13:46:20 FiveTools

难道你不换他们两个在一个“位置：亲属”股利和使div可拖动？然后将图像的z-index设置为1，将图标设置为2，这样它总是位于顶部？然后你可以在图标上使用“position：absolute; right：0px; top：0px”。

所以类似这样的

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

但DIV图像配将是一个图像，并.holder将可拖动

来源

2012-05-17 13:51:13 TommyBs

这很好。如果图片/ div的大小是动态的呢？我将如何解释这一点？谢谢您的帮助！ – Jared

它应该可以工作，它是需要位置的图标。可能只需要玩一下风格 – TommyBs

有没有一种奇特的方式来根据图像的高度和宽度动态设置图标的位置？ – Jared

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

回答

相关问题