本文实例讲述了jquery利用拖拽方式在图片上添加热链接的实现过程，分享给大家供大家参考。具体如下：
运行效果截图如下：
项目的需求，要在一张图片上加不同的链接，比如说，图片是一个套房，里面有沙发，茶几，酒柜，电视柜等，然后在这些物件上加一个超链接，点击后打开相关产品的介绍。
用jquery写了一个在图片添加锚点的功能，实现的原理：一个文本框写入标题，一个文本框写链接，一个添加按钮，一个编辑按钮，当写好内容后点击添中添加，便会在图片的上方出现一个p标签，然后按着鼠标左键拖拽该标签放到相应的地方松开就可以了，下面来看具体代码。
首入引入jquery库

构建html。

写上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 = +title+
;组装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($(.img_box img).width()-owidth)){ //如果移动大于图片的宽度减去标签的宽度，证明移到了图片外，应该设为可用的最大值 x = $(.img_box img).width()-owidth; } 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; }) })
以上就是本文的全部内容，希望对大家的学习有所帮助。