JQ拖曳效果
2016-06-16 08:30
495 查看
图片拖拽效果,网上找的某位大神力作:
$(function(){ /*--------------拖曳效果---------------- *原理:标记拖曳状态dragging ,坐标位置iX, iY * mousedown:fn(){dragging = true, 记录起始坐标位置,设置鼠标捕获} * mouseover:fn(){判断如果dragging = true, 则当前坐标位置 - 记录起始坐标位置,绝对定位的元素获得差值} * mouseup:fn(){dragging = false, 释放鼠标捕获,防止冒泡} */ var dragging = false; var iX, iY; $("#drag").mousedown(function(e) { dragging = true; iX = e.clientX - this.offsetLeft; iY = e.clientY - this.offsetTop; this.setCapture && this.setCapture(); return false; }); document.onmousemove = function(e) { if (dragging) { var e = e || window.event; var oX = e.clientX - iX; var oY = e.clientY - iY; locationX=(507-oX)*3264/380; locationY=oY*3264/380; $("#drag").css({"left":oX + "px", "top":oY + "px"}); return false; } }; $(document).mouseup(function(e) { dragging = false; $("#drag")[0].releaseCapture(); e.cancelBubble = true; }) })
html代码
<div style="height:100%;position:relative;margin:10px auto;width:507px"> <img src='' id="printimg" style='height:380px;position:absolute;top:0;right:0;'/> <img src='${path}/style_cp/img/red.png' id="drag" style='height:25px;width:25px;position:absolute;top:0;right:0;z-index:10;cursor:hand'/> </div>
相关文章推荐
- jQuery如何设置复选按钮选中,求解
- Python实现类似jQuery使用中的链式调用的示例
- jquery easyui datagrid 的选中、选择
- Jquery里live事件移除原因
- Jquery源码解析-设计理念
- jQuery插件开发全解析
- 实现jQuery扩展总结
- jQuery扩展插件和拓展函数的写法
- jQuery插件之路(三)——文件上传(支持拖拽上传)
- Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
- JSP中JQuery UI Dialog弹窗使用具体操作
- jQuery 3.0 的变化及使用方法
- jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中
- 【jQuery】jQuery修改class属性和CSS样式
- 通过jQuery Ajax使用FormData对象上传文件
- jQuery中的trigger和triggerhandler区别
- jQuery的实例化过程
- jquery中,size()和length的区别
- 解决jquery和其他库的冲突
- jQuery数组处理函数