JQuery实现鼠标拖动元素移动位置
2017-04-18 15:59
477 查看
JQuery实现元素移动位置有很多种方法,其中一个是根据鼠标在指定区域内随意移动,还有一种的是根据方向键在一定区域内上下左右平移。这二种只能说各有优劣,通过方向键平移,实现相对简单,操作也更具备可控性,但是就是移动效率相对较低,每次平移量过大造成不够精准,平移量过小则会使移动过程更为繁琐。跟随鼠标自由移动,可以自由控制平移量,精准的移动到自己想要的位置,但是实现较为复杂,并且控制过程中容易出现体验卡顿等。
一 根据方向键移动
HTML部分
二 根据鼠标在指定区域内随意移动
标题,内容,下标区都可以根据鼠标在指定区域块移动
HTML部分
这里主要是一个html截图与jQuery实现代码,具体细节欢迎留言讨论。
一 根据方向键移动
HTML部分
<div class="content_room"> <div class="room_text">欢迎各位领导前来视察工作</div> </div> <div class="add_metting_list"> <div class="subject_title">调整内容区位置:</div> <div class="control_direction"> <div class="top"><img src="img/top.png"></div> <div class="left"><img src="img/left.png"></div> <div class="right"><img src="img/right.png"></div> <div class="bottom"><img src="img/bottom.png"></div> </div> < </div>``` jQuery部分,仅展示出上升部分,下左右类似。 $(".top").click(function () { var top=$(".room_text").css("top"); var top_num =top.replace('px',''); var top_new=top_num*1-5*1; if(top_new<5){ alert("已到顶部"); }else{ var top_css=top_new+'px'; $(".room_text").css('top',top_css); } });
二 根据鼠标在指定区域内随意移动
标题,内容,下标区都可以根据鼠标在指定区域块移动
HTML部分
<div class="card" id="title"> <!--<img src="img/loginbg.png" >--> <div class="first_line">成都超极限文化传播有限公司</div> <div class="second_line">王欻欻</div> <div class="third_line">职务:软件工程师</div> </div>
jQuery部分 var x1,y1,x2,y2,offleft,offtop,isclik=0; $(function() { var wmax=500-$(".first_line").width(); var hmax=300-$(".first_line").height(); $(".first_line").mousedown(function(e){ x1=e.pageX; y1=e.pageY; offleft=parseInt($(".first_line").css('left')); offtop=parseInt($(".first_line").css('top')); isclik=1; }); $(".card").mousemove(function(e){ if(isclik==1){ x2=e.pageX; y2=e.pageY; var xx=x2-x1+offleft; var yy=y2-y1+offtop; if(xx>=0&&xx<wmax){ $(".first_line").css('left',xx+"px"); } if(yy>=0&&yy<hmax-1){ $(".first_line").css('top',yy+"px"); } } }).mouseup(function(){ isclik=0; }); second_line和third_line的移动类似,只需要改动部分变量名。
这里主要是一个html截图与jQuery实现代码,具体细节欢迎留言讨论。
相关文章推荐
- jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
- jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
- jQuery 实现交换元素位置(移动节点)
- WPF下Window设置WindowStyle="None"时实现鼠标拖动移动窗口位置
- 在运行时通过鼠标拖动移动控件位置及改变控件的大小
- Javascript实现图片位置控制(鼠标拖拽 + 键盘方向键移动)源码分享
- PHP+MySQL+jQuery实现随意拖动层并即时保存拖动位置
- 基于jquery实现的鼠标拖拽元素复制并写入效果
- JQuery实现表格隔行换色,鼠标移动变色,点击选择变色
- jquery实现跟随鼠标移动显示页面信息
- 基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
- JQuery 实现鼠标移动的动态交替
- PHP+MySQL+jQuery实现随意拖动层并即时保存拖动位置
- jquery实现的提示浮层跟随鼠标移动
- 利用jquery实现,鼠标移动到表格变色特效
- 实现可拖动大小,移动位置的PictureBox
- jquery实现div遮罩效果,并获取鼠标位置。
- jquery实现的提示浮层跟随鼠标移动
- 在WPF里面实现以鼠标位置为中心缩放移动图片
- jquery 实现 鼠标拖拽元素复制并写入效果