一.你需要准备?
二.效果预览
三.代码之风
3.1 HTML
<%--
Created by IntelliJ IDEA.
User: milogenius
Date: 2019/10/30
Time: 17:21
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
</head>
<%--页面浮标--%>
<div style="position: fixed;top: 43%;right: 0;z-index: 9;width: 69px;" id="rule">
<a id="tz" style="display: block" href="https://blog.csdn.net/milogenius"><img style="width: 69px;" src="../images/rockets.jpg" alt=""></a>
</div>
<script src="../js/drag.js"></script>test
<script type="text/javascript" >
new drag({el:'rule'});
</script>
</body>
</html>
3.2 JS
function drag(){
this.obj = arguments[0];
this.el = document.getElementById(this.obj.el);
this.l = 0, this.t = 0, this.old_l = 0, this.old_t = 0, this.point_l = 0, this.point_t = 0;
this.index = 0;
this.init();
}
drag.prototype = {
constructor: "drag",
init: function(){
this.EventHandler();
},
EventHandler: function(){
var self = this;
self.el.addEventListener("touchstart", self.clickDown.bind(this), false);
self.el.addEventListener("touchmove", self.clickMove.bind(this), false);
document.addEventListener("touchend", self.clickUp.bind(this), false);
},
clickDown: function(){
var self = this;
document.addEventListener("touchmove", self.htmlScroll, { passive: false });
document.querySelector("body").style.overflow ="hidden";
var point = event.touches[0];
self.old_l = point.clientX;
self.old_t = point.clientY;
self.scroll();
self.point_l = self.old_l - self.scroll().left;
self.point_t = self.old_t - self.scroll().top;
},
clickMove: function(){
var self = this;
var point = event.touches[0];
self.l = point.clientX;
self.t = point.clientY;
var now_l = self.l - self.point_l;
var now_t = self.t - self.point_t;
if(now_l < 0){
now_l = 0;
}
console.log(window.screen.availWidth - self.getStyle().width.split("p")[0])
if(now_l > window.screen.availWidth - self.getStyle().width.split("p")[0]){
now_l = window.screen.availWidth - self.getStyle().width.split("p")[0]
}
if(now_t > window.screen.availHeight - self.getStyle().height.split("p")[0]-80){
now_t = window.screen.availHeight - self.getStyle().height.split("p")[0]-80
}
if(now_t <= 0){
now_t = 0;
}
self.el.style.left = now_l+"px";
self.el.style.top = now_t+"px";
},
clickUp: function(){
var self = this;
document.removeEventListener("touchmove", self.htmlScroll, { passive: false });
document.querySelector("body").style.overflow ="initial";
},
scroll: function(){
var json = {};
json.left = this.el.offsetLeft;
json.top = this.el.offsetTop;
return json;
},
getStyle: function (){
if(window.currentStyle){
style=window.currentStyle(this.el,null);
}else{
style=window.getComputedStyle(this.el,null)
}
return style;
},
htmlScroll: function(event){
if (event.cancelable) {
if (!event.defaultPrevented) {
event.preventDefault();
}
}
}
}
3.3 JAVA
@Controller
@RequestMapping("/test")
public class TestController {
@RequestMapping("toIndexPage.html")
public String toIndexPage(){
return "/test";
}
}
