// 使用说明:(需要移动的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 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(); } } // export default myDomMove;