jquery verwendet Drag & Drop, um Hotlinks zu images_jquery hinzuzufügen

Das Beispiel in diesem Artikel beschreibt den Implementierungsprozess der Verwendung von jquery zum Hinzufügen von Hotlinks zu Bildern per Drag & Drop. Ich möchte es als Referenz mit Ihnen teilen. Die Details lauten wie folgt:
Der Screenshot des Laufeffekts sieht wie folgt aus:

Je nach den Anforderungen des Projekts müssen Sie einem Bild unterschiedliche Links hinzufügen. Beispielsweise handelt es sich bei dem Bild um eine Suite mit Sofa, Couchtisch, Weinschrank, TV-Schrank usw. Fügen Sie dann einen Hyperlink zu diesen hinzu Objekte und klicken Sie dann auf. Öffnen Sie dann die Einführung verwandter Produkte.

Eine Funktion zum Hinzufügen von Ankerpunkten zu Bildern mithilfe von JQuery geschrieben Das Implementierungsprinzip: Ein Textfeld zum Schreiben des Titels, ein Textfeld zum Schreiben des Links, eines zum Hinzufügen Klicken Sie nach dem Schreiben des Inhalts auf die Schaltfläche „Hinzufügen“ und drücken Sie dann die linke Maustaste, ziehen Sie die Beschriftung an die entsprechende Stelle und lassen Sie sie los Code.

Zuerst JQuery-Bibliothek importieren

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

HTML erstellen.

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

Schreiben Sie CSS Beachten Sie, dass die Position der Beschriftung hier relativ zur Position des Bildes ist, daher sollte die img_box des Bildes mit position: relative;
hinzugefügt werden

*{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 schreiben

$(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;
   })
 
  })

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.