1

Web サイト用の写真タグ プラグインを作成しようとしています。私には長い道のりがあります。他にも実際のプラグインがあることは知っていますが、ここで独自のプラグインを作成したいと思います。質問は、クリックした後に画像にボックスを表示しようとしたのですが、表示されず、画像に追加されません。

<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を参照してください。

test.jpg 画像が利用できないため、クリック機能を div に移動しました。また、より明確に表示するために div に色を付けました。それ以外の場合は、残りのコードをそのまま残しました

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