<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } </style> </head> <body> <div id="refresh" style="height:100%;position: relative;background:#ccc;"> <div id="managerAuthClick" style="200px;height:200px;position: fixed;bottom: 30px;right: 0;background: #ff0000;"></div> </div> </body> </html> <script src="jquery-1.8.3.min.js" type="text/javascript"></script> <script src="js_height.js" type="text/javascript"></script> <script> var _index = {}; window.onload = function() { _index.iconMove("refresh","managerAuthClick"); } _index.iconMove = function(father,childId) { var posi = { clickX: 0, //点击left clickY: 0, //点击top touchX: 0, //移动left touchY: 0, //移动top nowX: 0, //默认left nowY: 0, //默认top moveToX: 0, //准备移动到位置 moveToY: 0, //准备移动到位置 open: true } var managerAuthClick = document.getElementById("managerAuthClick"); posi.nowX = $("#"+childId).offset().left; posi.nowY = $("#"+childId).offset().top; var bodyHeight = $("body").innerHeight(); var bodyWidth = $("body").innerWidth(); var iconHeight = $("#"+childId).height(); var iconWidth = $("#"+childId).width(); var refreshTop = $("#"+father).offset().top; var refreshBottom = $("#"+father).height(); $("#"+childId)[0].addEventListener("touchstart", function(e) { $("#"+father).css("overflow", "hidden") posi.open = true; var touch = e.touches[0]; posi.clickX = parseInt(touch.pageX); posi.clickY = parseInt(touch.pageY); posi.nowX = managerAuthClick.offsetLeft; posi.nowY = managerAuthClick.offsetTop; posi.moveToX = posi.nowX; posi.moveToY = posi.nowY; e.stopPropagation(); }); $("#"+childId)[0].addEventListener("touchmove", function(e) { posi.open = false; var touch = e.touches[0]; posi.touchX = parseInt(touch.pageX); //移动X posi.touchY = parseInt(touch.pageY); //移动Y posi.moveToX = posi.touchX - posi.clickX + posi.nowX; posi.moveToY = posi.touchY - posi.clickY + posi.nowY; /*固定在圈内*/ posi.moveToX > bodyWidth - iconWidth ? posi.moveToX = bodyWidth - iconWidth : posi.moveToX = posi.moveToX; posi.moveToX < 0 ? posi.moveToX = 0 : posi.moveToX = posi.moveToX; posi.moveToY > refreshBottom - iconHeight / 2 ? posi.moveToY = refreshBottom - iconHeight / 2 : posi.moveToY = posi.moveToY; posi.moveToY < refreshTop ? posi.moveToY = refreshTop : posi.moveToY = posi.moveToY; move(); e.stopPropagation(); }); $("#"+childId)[0].addEventListener("touchend", function(e) { $("#"+father).css("overflow", "auto") posi.moveToX > bodyWidth / 2 - iconWidth / 2 ? posi.moveToX = bodyWidth - iconWidth : posi.moveToX = 0; moveEnd(); }); function move() { $("#"+childId).css({ left: posi.moveToX, top: posi.moveToY, 'transition': 'none' }) } function moveEnd() { $("#"+childId).css({ left: posi.moveToX, top: posi.moveToY, 'transition': '0.2s' }) } } </script>
效果：中间方块可以拖动，然后如果方块靠右边，向右边靠拢，如果方块靠左边，向左边靠拢