// 使用说明：（需要移动的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;//抬起重置鼠标点击位置
|
if (that.state == 'down') {//两种模式
|
var chous = Math.abs(that.__yy - that.__sy) < that.__wy / 8;
|
} else if (that.state == 'up') {
|
var chous = Math.abs(that.__yy - that.__sy) > that.__wy / 8;
|
}
|
if (chous) {
|
that.changeDomPosition(0, 0, (parseFloat(that.__wy / 10) * 2.999));//改变位置
|
// that.getDomPosition();//抬起获取dom位置/持续停留使用
|
that.state = 'down';
|
$('#map').css("height", (index, value) => {//改变地图高度
|
return '50%';
|
})
|
map.invalidateSize(true);//应用地图高度
|
} else {
|
that.changeDomPosition(0, 0, that.__wy - 80);//改变位置
|
// 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;
|
