1

我正在尝试为我的网站制作照片标签插件。我还有很长的路要走。我知道还有其他实际插件，但我想在这里创建自己的插件。问题是我试图在单击图像后使一个框出现在图像上，但它没有出现，也没有附加在图像上。

<head>
    <style>
    #imageHolder {
        position:relative;
        border:dashed 2px #7E7E7E;
        min-width:300px;
        min-height:300px;
        box-shadow:0 0 5px #000;
        cursor:pointer;
        float:left;
        }
        #tag
        {
          position:absolute;
          top:0;left:0;
          width:250px;
        }
        #box
        {
          border:solid 3px #000;
          width:100px;
          height:100px;
          float:left;
        }
    </style>

    <script style = "text/javascript"> 
      $(document).ready(function(){
        var mouseX = 0;
        var mouseY = 0;
        $("#imageHolder img").click(function(e){
          var imgBox = $(this).parent();
          mouseX = e.pageX - $(imgBox).offset().left;
          mouseY = e.pageY - $(imgBox).offset().top;
          $('#tag').remove();
          $(imgBox).append('<div id = "tag"><div id="box"></div></div>');
          $('#tag').css({top:mouseY,left:mouseX});
        });
    });
    </script> 
    </head>

<body>
<div id = "imageHolder">
<img src = "test.jpg"/>
</div>
</body>

这段代码有什么问题？

4

2 回答 2

2

有趣且困难但非常简单的解决方案

http://jsfiddle.net/e4tr7/5/

$("#imageHolder img").click(function (e) {
  var offset = $(this).offset();
  var position = {
    left: e.clientX - offset.left - 50,
    top: e.clientY - offset.top - 50
  }
  var append = $('<div class="tag"><div class="box"></div></div>').draggable({containment: "parent"}).css({"position":"absolute","top":position.top,"left":position.left});
  $(this).parent().append(append);

});
于 2013-01-15T10:19:44.253 回答
0

您的示例似乎有效，请参阅JSFiddle。

我将点击功能移到了 div，因为 test.jpg 图像不可用。我还为 div 着色以更清楚地显示它。否则，我将您的其​​余代码保留原样

$("#imageHolder").click(function(e){
  var imgBox = $(this);
于 2013-01-15T09:42:26.380 回答