用jQuery实现拖动
2016-05-17 16:14
281 查看
今天我用jQuery实现了简单的物体拖放功能,已经设置的上下左右的临界点,可以更具自己的需要设置限制区域,我这里设置的是document对象的高度和宽度。
原理很简单就是:
1:获取当前物体的偏移量,以便于之后的计算
2:获取鼠标的当前位置坐标。
3:得到新的偏移量,保存下来
4:新的位置是用旧的坐标加上偏移量的该变量,就能计算出现在物块的位置了。
限制当然也很简单(我限制的宽高是当前浏览器页面的宽高),用新的位置和最大最小去做判断(我在代码部分做了很明确的注释),之后更具判断的值来设定位置就可以实现为止的限制了
1:HTML部分
2:CSS部分
3:JQuery部分
原理很简单就是:
1:获取当前物体的偏移量,以便于之后的计算
2:获取鼠标的当前位置坐标。
3:得到新的偏移量,保存下来
4:新的位置是用旧的坐标加上偏移量的该变量,就能计算出现在物块的位置了。
限制当然也很简单(我限制的宽高是当前浏览器页面的宽高),用新的位置和最大最小去做判断(我在代码部分做了很明确的注释),之后更具判断的值来设定位置就可以实现为止的限制了
1:HTML部分
<div id="box"></div>
2:CSS部分
* { margin: 0; padding: 0; } #box { position: absolute; top: 100px; left: 100px; width: 100px; height: 100px; background: orange;
3:JQuery部分
<script src="jquery-2.1.4.min.js"></script> <script> $(function () { //创建小方块的jquery对象 var $box = $("#box"); //创建小方块的鼠标点按下事件 $box.mousedown(function (event) { //获取鼠标按下的时候左侧偏移量和上侧偏移量 var old_left = event.pageX;//左侧偏移量 var old_top = event.pageY;//竖直偏移量 //获取鼠标的位置 var old_position_left = $(this).position().left; var old_position_top = $(this).position().top; //鼠标移动 $(document).mousemove(function (event) { var new_left = event.pageX;//新的鼠标左侧偏移量 var new_top = event.pageY;//新的鼠标竖直方向上的偏移量 //计算发生改变的偏移量是多少 var chang_x = new_left - old_left; var change_y = new_top - old_top; //计算出现在的位置是多少 var new_position_left = old_position_left + chang_x; var new_position_top = old_position_top + change_y; //加上边界限制 if(new_position_top<0){//当上边的偏移量小于0的时候,就是上边的临界点,就让新的位置为0 new_position_top=0; } //如果向下的偏移量大于文档对象的高度减去自身的高度,就让它等于这个高度 if(new_position_top>$(document).height()-$box.height()){ new_position_top=$(document).height()-$box.height(); } //右限制 if(new_position_left>$(document).width()-$box.width()){ new_position_left=$(document).width()-$box.width(); } if(new_position_left<0){//左边的偏移量小于0的时候设置 左边的位置为0 new_position_left=0; } $box.css({ left: new_position_left + 'px', top: new_position_top + 'px' }) }); $box.mouseup(function(){ $(document).off("mousemove"); }) }); }) </script>
相关文章推荐
- jQuery学习笔记四:查找遍历
- social-share,社会化分享组件之jquery版
- 从零开始学jQuery Validate 之01
- JQuery对JSON数组的操作
- jQuery Mobile操作HTML5的常用函数总结
- jQuery学习笔记三:获取内容(text、html、val)
- 【转】jQuery选择器总结
- jQuery实战学习笔记(一)-选择要操作的元素和管理包装集
- 基于jQuery下拉日期插件
- jquery的学习
- jquery 双击修改某项值
- jQuery扩展方法
- jQuery基础——样式篇
- jQuery之防止冒泡事件
- jquery中click事件的几种写法
- jquery中的attr和prop深度理解
- 5月13日 Jquery基础
- jQuery+css3弹出框插件
- jquery动态新增行
- 统一处理jquery ajax请求过程中的异常错误信息的机制