jquery는 드래그 앤 드롭을 사용하여 Images_jquery에 핫링크를 추가합니다.

이 기사의 예에서는 jquery를 사용하여 드래그 앤 드롭으로 이미지에 핫 링크를 추가하는 구현 프로세스를 설명합니다. 참고용으로 공유하고 싶습니다. 세부 내용은 다음과 같습니다.
실행 중인 효과의 스크린샷은 다음과 같습니다.

프로젝트 요구 사항에 따라 사진에 다양한 링크를 추가해야 합니다. 예를 들어 사진은 소파, 커피 테이블, 와인 캐비닛, TV 캐비닛 등이 있는 스위트룸입니다. 그런 다음 해당 링크에 하이퍼링크를 추가해야 합니다. 개체를 클릭한 후 관련 제품 소개를 엽니다.

jquery를 사용하여 이미지에 앵커 포인트를 추가하는 함수를 작성했습니다. 구현 원칙: 제목을 작성하는 텍스트 상자 하나, 링크를 작성하는 텍스트 상자 하나, 추가하는 텍스트 상자 하나 버튼과 편집 버튼이 하나 있습니다. 내용을 작성한 후 추가를 클릭하면 그림 위에 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;
   })
 
  })

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.