首页 / 脚本样式 / JavaScript / jquery利用拖拽方式在图片上添加热链接

项目的需求，要在一张图片上加不同的链接，比如说，图片是一个套房，里面有沙发，茶几，酒柜，电视柜等，然后在这些物件上加一个超链接，点击后打开相关产品的介绍。
用jquery写了一个在图片添加锚点的功能，实现的原理：一个文本框写入标题，一个文本框写链接，一个添加按钮，一个编辑按钮，当写好内容后点击添中添加，便会在图片的上方出现一个P标签，然后按着鼠标左键拖拽该标签放到相应的地方松开就可以了，下面来看具体代码。
首入引入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="http://"><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; }） }）