可拖動的懸浮球(增加螢幕邊界判斷)
阿新 • • 發佈：2018-12-17
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="stylesheet" /> <style> #touch { width: 50px; height: 50px; position: absolute; left: 100px; top: 200px; margin-left: -30px; margin-top: -30px; z-index: 999999; } #simple-menu { cursor: move; } </style> </head> <body> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">可拖動懸浮小球</h1> </header> <div class="mui-content"> <div id="touch" style="width: 50px; height: 50px; position: absolute;"> <img id="simple-menu" src="images/search.png" style="width: 50px; height: 50px;" /> </div> </div> <script> mui.init({ swipeBack: true //啟用右滑關閉功能 }); var div = document.getElementById('touch'); var viewWidth = window.screen.width; var viewHeight = window.screen.height; var divWidth = parseInt(div.style.width); var divHeight = parseInt(div.style.height); div.addEventListener('touchmove', function(event) { event.preventDefault(); //阻止其他事件 // 如果這個元素的位置內只有一個手指的話 if(event.targetTouches.length == 1) { var touch = event.targetTouches[0]; // 把元素放在手指所在的位置 var tempWidth = touch.pageX;//儲存x座標 var tempHeigth = touch.pageY;//儲存Y座標 if((touch.pageX + divWidth) > viewWidth) {//超越右邊界 tempWidth = viewWidth - divWidth/2; } if((touch.pageY + divHeight) > viewHeight) {//超越下邊界 tempHeigth = viewHeight - divHeight; } if((touch.pageX - divWidth)<0){//超越左邊界 tempWidth=divWidth/2; } if((touch.pageY - divHeight)<0){//超越上邊界 tempHeigth=divHeight/2; } div.style.left = tempWidth + 'px'; div.style.top = tempHeigth + 'px'; div.style.background = ""; } }, false); </script> </body> </html>