1、pc端 (js)
<style> #box{ width: 100px; height: 100px; background: pink; position: absolute; } </style> <div id="box"></div> <script> var oBox=document.querySelector("#box"); oBox.οnmοusedοwn=function(ev){ //设置box1捕获所有的鼠标按下的事件 var e=ev||event; var disX=e.clientX-oBox.offsetLeft; var disY=e.clientY-oBox.offsetTop; //兼容ie8 //当拖动过快，或者是超出浏览器的文档窗口时，拖动对象身上的onmousedown就会失效，拖动时为拖动的元素对象锁定鼠标事件 //在chrome中没有setCapture()和releaseCapture()方法 ,调用会导致浏览器报错,所以要判断浏览器是否认识setCapture if(oBox.setCapture){ oBox.setCapture(); } document.οnmοusemοve=function(ev){ var e=ev||event; var L=e.clientX-disX; var T=e.clientY-disY; //边界：最大屏幕的总宽度-div的宽度 /* if(L<0){ L=0; }else if(L>document.documentElement.clientWidth-oBox.offsetWidth){ L=document.documentElement.clientWidth-oBox.offsetWidth } if(T<0){ T=0; }else if(T>document.documentElement.clientHeight-oBox.offsetHeight){ T=document.documentElement.clientHeight-oBox.offsetHeight } */ L=Math.min(Math.max(L,0),document.documentElement.clientWidth-oBox.offsetWidth) T=Math.min(Math.max(T,0),document.documentElement.clientHeight-oBox.offsetHeight) oBox.style.left=L+"px"; oBox.style.top=T+"px"; } document.οnmοuseup=function(){ document.οnmοusemοve=document.οnmοuseup=null; if(oBox.releaseCapture){ oBox.releaseCapture();//拖动后在解除事件锁定 } } return false;//清除浏览器拖放默认行为 }2、pc端 (jquery)
<style type="text/css"> #moveBar { position: absolute; width: 200px; height: 400px; background: black;、 color：white; border: solid 1px #000; } #banner { background: #ddd; cursor: move; } </style> <div id="moveBar"> <div id="banner">按住鼠标移动当前div</div> <div id="content">内容部分</div> </div> $(function () { dragPanelMove("#banner","#moveBar"); function dragPanelMove(downDiv,moveDiv){ $(downDiv).mousedown(function (e) { var isMove = true; var div_x = e.pageX - $(moveDiv).offset().left; var div_y = e.pageY - $(moveDiv).offset().top; $(document).mousemove(function (e) { if (isMove) { var obj = $(moveDiv); obj.css({"left":e.pageX - div_x, "top":e.pageY - div_y}); } }).mouseup( function () { isMove = false; }); }); } });------------------------------------------------------------------------------------
3、移动端（js）
<style> *{ padding: 0; margin: 0; } #box{ width: 100px; height: 100px; background: pink; } </style> <div id="box"></div> var oBox = document.querySelector("#box"); var startPoint = 0; var startX = 0,startY=0; var translateX = 0,translateY = 0; oBox.addEventListener( "touchstart", function(e) { startPointX = e.changedTouches[0].pageX; startPointY = e.changedTouches[0].pageY; startX = translateX; startY = translateY; //阻止页面的滑动默认事件 document.addEventListener("touchmove",defaultEvent,false); }); oBox.addEventListener( "touchmove", function(e) { var nowPointX = e.changedTouches[0].pageX; var nowPointY = e.changedTouches[0].pageY; var disX = nowPointX - startPointX; var disY = nowPointY - startPointY; translateX= startX + disX; translateY= startY + disY; //边界 translateX=Math.min(Math.max(translateX,0),document.documentElement.clientWidth-oBox.offsetWidth) translateY=Math.min(Math.max(translateY,0),document.documentElement.clientHeight-oBox.offsetHeight) oBox.style.WebkitTransform = oBox.style.transform = "translate("+translateX+"px,"+translateY+"px)"; } ); oBox.addEventListener( "touchend", function(e) { document.removeEventListener("touchmove",defaultEvent,false); } ); function defaultEvent(e) { e.preventDefault(); }4、移动端（jquery）
<style> *{ padding: 0; margin: 0; } #box{ width: 100px; height: 100px; background: pink; } </style> <div id="box"></div> $(function(){ var oBox=$("#box") //触屏滑动事件 var startPoint = 0; var startX = 0,startY=0; var translateX = 0,translateY = 0; oBox.on("touchstart", function(e) { startPointX = e.originalEvent.changedTouches[0].pageX; startPointY = e.originalEvent.changedTouches[0].pageY; startX = translateX; startY = translateY; //阻止页面的滑动默认事件 $(document).on("touchmove",defaultEvent,false); }); oBox.on("touchmove", function(e) { var nowPointX = e.originalEvent.changedTouches[0].pageX; var nowPointY = e.originalEvent.changedTouches[0].pageY; var disX = nowPointX - startPointX; var disY = nowPointY - startPointY; translateX= startX + disX; translateY= startY + disY; //边界 translateX=Math.min(Math.max(translateX,0),$(window).width()-oBox.innerWidth()) translateY=Math.min(Math.max(translateY,0),$(window).height()-oBox.innerHeight()) oBox.css({'transform':"translate("+translateX+"px,"+translateY+"px)"}) }); oBox.on("touchend", function(e) { $(document).on("touchmove",defaultEvent,false); }); function defaultEvent(e) { e.preventDefault(); } });小技巧：
endX = e.originalEvent.changedTouches[0].pageX, endY = e.originalEvent.changedTouches[0].pageY; //往左滑动startX-endX>0,往右滑动startX-endX<0,点击时设兼容为5 var touchX = startX-endX; if(Math.abs(touchX)>5){//点击 if(touchX>=0){//往左滑动 }else{ } }或者
//->判断是否滑动 function isSwipe(strX, strY, endX, endY) { return Math.abs(endX - strX) > 30 || Math.abs(endY - strY) > 30; } //->判断滑动的方向 function swipeDir(strX, strY, endX, endY) { var changeX = endX - strX, changeY = endY - strY; return Math.abs(changeX) >= Math.abs(changeY) ? (changeX > 0 ? "right" : "left") : (changeY > 0 ? "down" : "up"); }