jqueryはドラッグアンドドロップを使用してホットリンクをimages_jqueryに追加します

この記事の例では、jquery を使用して画像にドラッグ アンド ドロップでホット リンクを追加する実装プロセスを説明します。参考のために共有したいと思います。詳細は以下の通りです。
実行中のエフェクトのスクリーンショットは次のとおりです:

プロジェクトの要件に従って、写真にさまざまなリンクを追加する必要があります。たとえば、写真はソファ、コーヒーテーブル、ワインキャビネット、テレビキャビネットなどのあるスイートです。次に、これらにハイパーリンクを追加します。オブジェクトを選択してクリックすると、関連製品の紹介が開きます。

jquery を使用して画像にアンカー ポイントを追加する関数を作成しました。実装原則: タイトルを記述するテキスト ボックス、リンクを記述するテキスト ボックス、および追加するテキスト ボックス。ボタンと 1 つの編集ボタン コンテンツを書き込んだ後、[追加] をクリックすると、画像の上に P ラベルが表示されます。次に、マウスの左ボタンを押して、ラベルを対応する場所にドラッグして放します。コード。

最初に jquery ライブラリをインポートします

<script src="js/jquery/1.11.1/jquery.min.js"></script>

HTML をビルドします。

<div class="box">
 <input type="text" name="title">
 <input type="text" name="link" value="http://">
  <input type="button" value="添加链接" id="add">
 <input type="button" value="编辑" id="show">
</div>
<div class="img_box">
 <img src="images/55cc64813c330.jpg">
</div>

CSS を記述します 。ここでのラベルの位置は画像の位置に相対的であるため、画像の img_box をposition:relative;
で追加する必要があることに注意してください。

*{padding: 0; margin: 0;}
.box{margin: 10px;}
.img_box{position: relative;}
.img_box .maodian{position: absolute; padding: 5px 10px; border-right: 5px; background: #000; 
   filter:alpha(opacity=40); 
   -moz-opacity:0.4; 
   opacity:0.4;
   top:10px;
   left:10px;
   color:#FFF;
   font-size: 12px;
   font-family: "宋体";
   cursor: pointer;
}
.maodian a{color: #FFF; text-decoration: none;}

JS を書く

$(function(){
   var obj = null ;//定义标签对象的全局变量，目的用于编辑
   $("#add").click(function(){//绑定添加按钮单击事件
    var title = $("input[name=title]").val();//取得标题内容
    var link = $("input[name=link]").val();//取得超链接
    var html = "<p class='maodian'><a href='"+link+"'>"+title+"</a></p>";组装P标签
    $(".img_box").append(html); //添加到img_box div中，即图片的后面
   });
 
   $(".img_box").delegate(".maodian","mousedown",function(e){//绑定标签鼠标按下事件
    obj = $(this);//把当前标签对象赋值给变量
    if(obj.setCapture){ //用于兼容非准浏览器
     obj.setCapture();
    }
    $("input[name=title]").val(obj.find("a").text());//把点中标签的内容加到标题文本框中
    $("input[name=link]").val(obj.find("a").attr("href"));/把点中标签的链接加到链接本框中
     var _x = e.pageX - obj.offset().left;//取得鼠标到标签左边left的距离
     var _y = e.pageY - obj.offset().top; //取得鼠标到标签顶部top的距离
     var oWidth = $(this).outerWidth(); //取得标签的宽，包括padding
     var oHeight = $(this).outerHeight();//取得标签的高，包括padding
     var x=0,y=0; 定义移动的全局变量
 
     $(".img_box").bind("mousemove",function(e){
      var img_position = $(".img_box").offset(); //取得图片的位置
      x = e.pageX -_x - img_position.left; //计算出移动的x值
      y = e.pageY -_y - img_position.top; //计算出移动的y值
      if(x<0){ //如果移动小于0，证明移到了图片外，应设为0
       x = 0;
      }else if(x>($(".img_box img").width()-oWidth)){
      //如果移动大于图片的宽度减去标签的宽度，证明移到了图片外，应该设为可用的最大值
       x = $(".img_box img").width()-oWidth;
      }
 
      if(y<0){ //同上
       y = 0;
      }else if(y>($(".img_box img").height()-oHeight)){
       y = $(".img_box img").height()-oHeight;
      }
      obj.css({"left":x,"top":y});
     });
 
     $(".img_box").bind("mouseup",function(){ //绑定鼠标左键弹起事件
      $('.img_box').unbind("mousemove"); //移动mousemove事件
      $(this).unbind("mouseup"); //移动mouseup事件
      if(obj.releaseCapture){ //兼容非标准浏览器
      obj.releaseCapture();
     }
      
     });
     return false; //用于选中文字时取消浏览器的默认事件
   });
 
   $(".img_box").delegate(".maodian","dblclick",function(){//绑定双击事件
    $(this).remove(); //删除当前标签
   })
 
   $("#show").click(function(){//绑定编辑按钮
     //更新内容到标签
    obj.find("a").text($("input[name=title]").val()).attr("href",link);
   })
  
   $(".img_box").delegate("a","click",function(){ //取消a标签的单击默认事件
    return false;
   })
 
  })

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。