From d25a69f40c327f8bd72a7a16d5090bc85f6952df Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Sat, 19 Feb 2022 09:20:52 +0800
Subject: [PATCH] Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/qfqk-android
---
leafletMapOur/grabOrdersMap/js/move.js | 299 ++++++++++++++++++++++++++++++++++-------------------------
1 files changed, 170 insertions(+), 129 deletions(-)
diff --git a/leafletMapOur/grabOrdersMap/js/move.js b/leafletMapOur/grabOrdersMap/js/move.js
index b2ac24c..7c6f585 100644
--- a/leafletMapOur/grabOrdersMap/js/move.js
+++ b/leafletMapOur/grabOrdersMap/js/move.js
@@ -1,132 +1,173 @@
-// 使用说明：（需要移动的dom，触摸块dom，跟随改变map dom）
-function myDomMove(dom, div, map) {
- this.m = $(dom);
- this.div = $(div);
- this.mapId = $(map);
- this.__xx = null; //鼠标实时位置
- this.__yy = null;
- this.__sx = null; //鼠标开始位置
- this.__sy = null;
- this.__dx = null; //dom位置
- this.__dy = null;
- this.mapH = null; //地图高度
- this.__wy = null; //屏幕高度
- this.state = "up"; //dom状态默认up
+class $moveWindow {
+ constructor(data) {
+ this.id = data.id;
+ this.start = 0;
+ this.end = 0;
+ this.domHeight = 0;
+ this.domMove = null;
+ this.openValue = false;
+ this.useHeight = data.minHeight;
+ this.maxHeight = data.maxHeight;
+ this.height = data.minHeight;
+ this.critical = data.critical;
+ this.openAnimation = data.openAnimation;
+ let that = this;
+ this.fn =
+ data.fn ? (function(res) {
+ // console.log("回调函数");
+ data.fn(res);
+ that.changeHeight(res);
+ // if (res.state === true) {
+ // console.log(that.openValue, res.state)
+ // } else if (res.state === false) {
+ // console.log(that.openValue, res.state)
+ // }
+ }) :
+ (function(res) {
+ console.log("未设置回调函数");
+ console.log(res);
+ });
- this.getMosePosition = (x, y) => { //获取鼠标位置
- this.__sx = x;
- this.__sy = y;
- // console.log(this.__sy, '鼠标开始');
-
- }
- this.getDomPosition = () => { //获取dom位置
- this.__dx = this.m.offset().left;
- this.__dy = this.m.offset().top;
- this.__wy = document.documentElement.clientHeight;
- // console.log(this.__dy, 'dom');
- }
- this.getMapHeight = () => { //获取地图高度
- var that = this;
- this.mapId.css("height", (index, value) => {
- that.mapH = parseFloat(value);
- })
- // console.log(that.mapH, 'map位置');
- }
- this.changeDomPosition = (x, y, dy) => { //改变dom位置
- var that = this;
- // this.mapId.css("height", (index, value) => {//改变地图高度
- // var h = this.mapH + y;
- // console.log(h);
- // return h ;
- // })
- this.m.animate({ top: dy + "px" }, 10);
-
- }
-
-
- //begin
- this.followFinger = (map, state = 14) => { //(地图实例，dom状态判断是向上还是向下)
- // console.log('开始跟随手指');
- var that = this;
- if (state != 14) {
- that.state = state;
- // console.log(that.state);
- }
- that.getDomPosition(); //获取dom位置
- that.getMapHeight(); //获取地图高度
- var once = true;
- that.div.on('touchmove', function(e) { //获取鼠标位置
- e = e || window.event;
- that.__xx = e.touches[0].clientX;
- that.__yy = e.touches[0].clientY;
- if (once) { //获取第一次点击的位置
- once = false;
- that.getMosePosition(that.__xx, that.__yy);
- }
- // console.log(that.__yy, '鼠标');
- var h = that.__yy - that.__sy //鼠标移动距离y
-
- if (that.state == 'down') { //两种模式
- // console.log(that.state);
- if (h >= 0 && h + that.__dy <= that.__wy - 20) {
- that.changeDomPosition(0, h, h + that.__dy); //改变位置
- // console.log(that.state,h + that.__dy,112);
- }
- } else if (that.state == 'up') {
- if (h >= -that.__dy && h <= that.__wy - 20) {
- that.changeDomPosition(0, h, h + that.__wy - 20); //改变位置
- // console.log(that.state,h + that.__wy - 20,112);
- }
- }
-
- });
- that.div.on('touchend', function() { //抬起重置
- once = true; //抬起重置鼠标点击位置
- var chous = null;
- if (that.state == 'down') { //两种模式
- // var chous = Math.abs(that.__yy - that.__sy) < that.__wy / 4;
- chous = (that.__sy - that.__yy) < 0;
- } else if (that.state == 'up') {
- // var chous = Math.abs(that.__yy - that.__sy) > that.__wy / 4;
- chous = (that.__sy - that.__yy) < 0;
- }
- if (!chous) {
- //改变dom位置
- that.changeDomPosition(0, 0, (parseFloat(that.__wy / 10) * 3.999));
- // that.getDomPosition();//抬起获取dom位置/持续停留使用
- that.state = 'down';
- $('#map').css("height", (index, value) => { //改变地图高度
- return '50%';
- })
- map.invalidateSize(true); //应用地图高度
- } else {
- // that.changeDomPosition(0, 0, that.__wy - 50); //改变位置
- that.changeDomPosition(0, 0, that.__wy); //改变位置
- // that.getDomPosition();//抬起获取dom位置/持续停留使用
- that.state = 'up';
- $('#map').css("height", (index, value) => { //改变地图高度
- return '100%';
- })
- map.invalidateSize(true); //应用地图高度
- }
- that.getMapHeight(); //抬起获取map高度
- });
- }
- this.destruction = () => { //初始化销毁
- this.m = $(dom);
- this.div = $(div);
- this.mapId = $(map);
- this.__xx = null; //鼠标实时位置
- this.__yy = null;
- this.__sx = null; //鼠标开始位置
- this.__sy = null;
- this.__dx = null; //dom位置
- this.__dy = null;
- this.mapH = null; //地图高度
- this.__wy = null; //屏幕高度
- this.state = "up"; //dom状态默认up
- this.div.off();
- }
+ this.ListenerTouchmove = function(window) {
+ let moseHeight = window.changedTouches[0].clientY;
+ // let windowHeight = document.body.clientHeight; //屏幕宽度
+ let endOn = moseHeight;
+ // console.log(that.domHeight, that.start, endOn)
+ let cha = that.domHeight + (+that.start - +endOn);
+ if (cha >= that.maxHeight) {
+ cha = that.maxHeight;
+ } else if (cha <= that.useHeight) {
+ cha = that.useHeight;
+ }
+ let d = {
+ state: "on",
+ height: cha,
+ };
+ that.fn(d);
+ };
+ this.ListenerTouchstart = function(window) {
+ let moseHeight = window.changedTouches[0].clientY;
+ that.start = moseHeight;
+ // that.domHeight = document
+ // .getElementById(that.id)
+ // .style.cssText.split("px")[0]
+ // .split("height:")[1];
+ that.domHeight = document
+ .getElementById(that.id)
+ .clientHeight;
+ };
+ this.ListenerTouchend = function(window) {
+ let moseHeight = window.changedTouches[0].clientY;
+ that.end = moseHeight;
+ let cha, states;
+ if (that.end >= that.start) {
+ states = false; //方向
+ cha = that.end - that.start;
+ } else {
+ states = true; //方向
+ cha = that.start - that.end;
+ }
+ if (cha >= that.critical) {
+ //高
+ that.opens(states, true); //程度
+ } else if (cha < that.critical) {
+ //低
+ that.opens(states, false); //程度
+ }
+ };
+ return this;
+ }
+ //启动监听事件
+ init() {
+ // this.domMove = document.getElementById(this.id);
+ let that = this;
+ this.checkDom(that.id, (dom) => {
+ //检测是否有dom
+ that.domMove = dom;
+ if (that.openAnimation) {
+ that.domMove.style.transition = 'all 0.2s';
+ }
+ that.domMove.addEventListener("touchmove", that.ListenerTouchmove);
+ // 结束位置靠滑动距离判断
+ that.domMove.addEventListener("touchstart", that.ListenerTouchstart);
+ that.domMove.addEventListener("touchend", that.ListenerTouchend);
+ });
+ }
+ //关闭监听事件
+ closeInit() {
+ this.domMove = document.getElementById(this.id);
+ this.domMove.removeEventListener("touchmove", this.ListenerTouchmove);
+ // 结束位置靠滑动距离判断
+ this.domMove.removeEventListener("touchstart", this.ListenerTouchstart);
+ this.domMove.removeEventListener("touchend", this.ListenerTouchend);
+ }
+ //输出事件
+ opens(val, chengdu) {
+ if (chengdu) {
+ this.openValue = val;
+ if (val) {
+ this.height = this.maxHeight;
+ } else {
+ this.height = this.useHeight;
+ }
+ } else {
+ this.height = this.domHeight;
+ }
+ let d = {
+ state: this.openValue,
+ height: this.height,
+ };
+ this.fn(d);
+ }
+ changeHeight(data) {
+ document
+ .getElementById(this.id).style.height = data.height + "px";
+ }
+ checkDom(name, fn) {
+ // 声明定时器
+ var timer = null;
+ // 检查dom是否执行完成
+ function checkDom() {
+ // let dom = that.$refs[name];
+ let dom = document.getElementById(name);
+ if (dom) {
+ // 执行dom加载完成后的操作
+ // 清除定时器
+ if (!timer) {
+ clearTimeout(timer);
+ }
+ if (fn) {
+ //回调函数
+ fn(dom);
+ return;
+ } else {
+ return dom;
+ }
+ } else {
+ // 自我调用
+ timer = setTimeout(checkDom, 100);
+ }
+ }
+ // 首次执行
+ checkDom();
+ }
+ // 结束位置是一半判断
+ // domMove.addEventListener("touchend", function (window) {
+ // let moseHeight = window.changedTouches[0].clientY;
+ // let windowHeight = document.body.clientHeight;
+ // let cha = windowHeight - moseHeight;
+ // console.log(cha, "最后位置");
+ // let centerPoint =
+ // (windowHeight / 2 - +that.useHeight) / 2 + +that.useHeight;
+ // if (cha >= centerPoint) {
+ // cha = windowHeight / 2;
+ // } else if (cha < centerPoint) {
+ // cha = that.useHeight;
+ // }
+ // that.height = cha;
+ // });
}
-// export default myDomMove;
\ No newline at end of file
+// export default moveWindow;
+
+// console.log(moveWindow)
--
Gitblit v1.9.3