Question

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

<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>

此代码有什么问题？

Answer 1

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

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);

});

Answer 2

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

我将click函数移动到div，因为test.jpg图像不可用。我还对div进行着色以更清楚地显示它。否则我按原样保留其余代码

$("#imageHolder").click(function(e){
  var imgBox = $(this);

单击后在图像中附加标记框

2 个答案:

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