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实现代码，具体细节欢迎留言讨论。
