位置: 编程技术 - 正文
jquery利用拖拽方式在图片上添加热链接(jquery拖拽功能)
编辑：rootadmin推荐整理分享jquery利用拖拽方式在图片上添加热链接(jquery拖拽功能)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:jquery拖拽功能,jquery实现拖拽效果,jq拖拽div替换位置,jquery拖拽流程布局,javascript 拖拽,jquery拖拽表单设计器,jquery拖动div,jquery拖动div,内容如对您有帮助，希望把文章链接给更多的朋友！
本文实例讲述了jquery利用拖拽方式在图片上添加热链接的实现过程，分享给大家供大家参考。具体如下：运行效果截图如下：
项目的需求，要在一张图片上加不同的链接，比如说，图片是一个套房，里面有沙发，茶几，酒柜，电视柜等，然后在这些物件上加一个超链接，点击后打开相关产品的介绍。
用jquery写了一个在图片添加锚点的功能，实现的原理：一个文本框写入标题，一个文本框写链接，一个添加按钮，一个编辑按钮，当写好内容后点击添中添加，便会在图片的上方出现一个P标签，然后按着鼠标左键拖拽该标签放到相应的地方松开就可以了，下面来看具体代码。
首入引入jquery库
构建html。
写上CSS，注意这里标签的位置是相对于图片的位置的，所以图片的img_box要加上position: relative;
写上JS
下一篇：jQuery实现宽屏图片轮播实例教程(jqgrid设置宽度)