jquery利用拖拽方式在图片上添加热链接分享

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

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

  *{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;}

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