ionic客服拖拽

最新推荐文章于 2020-09-25 16:24:34 发布

frank_hehe

最新推荐文章于 2020-09-25 16:24:34 发布

阅读量874

点赞数 1

分类专栏： web前端文章标签： web前端

本文链接：https://blog.csdn.net/frank_hehe/article/details/75646336

版权

web前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

经公司要求要写一个客服图标显示在app的屏幕上，用户可以随意拖到这个图标的位置，后面就用ionic的手势事件写了一个拖拽的功能,下面是代码

//客服拖拽
var ox,oy,
    totalHeight=window.screen.availHeight,//获取屏幕的高度
    totalWidth=window.screen.availWidth;//获取屏幕的宽度

//按下
$rootScope.onTouch = function($event){
    ox = $event.target.offsetLeft;
    oy = $event.target.offsetTop;
};
//拖拽
$rootScope.onDrag = function($event){
    var el = $event.target,
        dx = $event.gesture.deltaX,
        dy = $event.gesture.deltaY;
    el.style.left = ox + dx + "px";
    el.style.top = oy + dy + "px";
};
//松开
$rootScope.onRelease = function($event) {
    var el = $event.target;
    if (el.offsetTop < el.offsetHeight) {
        el.style.top = '10px';
    } else if (el.offsetTop > totalHeight - el.offsetHeight) {
        el.style.top = totalHeight - el.offsetHeight - 10 + "px";
    }
    if (el.offsetLeft < el.offsetHeight) {
        el.style.left = "10px";
    } else if (el.offsetLeft > totalWidth - el.offsetWidth) {
        el.style.left = totalWidth - el.offsetWidth - 10 + "px";
    }
};