拖拽进度条兼容移动端

浏览：472次- 评论：0次- 发布时间：2018-10-09

Html

Css

//触发
var drag = function(opt) {
    // this.el = document.getElementsByClassName(cls);
    this.el = document.querySelectorAll(opt.el);
    this.min = opt.min == 0 ? 0 : opt.min ? opt.min : 0;
    this.max = opt.max;
    this.type = opt.type || 'toast';
    this.init();
}
drag.prototype = {
    d: document,
    init: function() { //初始化
        var el = this.el,
            that = this,
            d = this.d;
        for (var i = 0; i < el.length; i++) {
            el[i].ontouchstart = function(e) { //moblie
                var w = that.dragStart(e, 'm');
                that.showInner();
                d.ontouchmove = function(e) {
                    that.dragMove(e, w, 'm');
                }
                d.ontouchend = function() {
                    that.dragEnd();
                }
            }
            el[i].onmousedown = function(e) { //pc
                var w = that.dragStart(e, 'p');
                that.showInner();
                // that.showModal(parseInt(parseInt(this.style.left) ? this.style.left : 0));
                d.onmousemove = function(e) {
                    that.dragMove(e, w, 'p');
                }
                d.onmouseup = function() {
                    that.dragEnd();
                }
            }
        }
    },
    showModal: function(m) { //跟随提示框
        var toast = this.target;
        var pre = toast.parentNode.parentNode,
            het, d = this.d,
            top = pre.offsetTop,
            wid = toast.offsetHeight,
            left = pre.offsetLeft + wid / 2,
            tLeft = toast.offsetLeft + pre.offsetLeft;
        this.toast = d.querySelector('.toast');
        if (!this.toast) { //为空时创建
            var div = d.createElement('div'),
                str = '<span>0</span><i class="triangle triangle_d"><i>';
            (div.className += 'toast', div.style.left = tLeft + 'px', d.body.appendChild(div), div.innerHTML = str);
            setTimeout(function() { //延迟获取toast宽宽
                het = div.offsetHeight;
                div.style.top = top - het - wid + 'px';
                this.toast = div;
            }, 0);
        } else {
            this.toast.className = this.toast.className.replace(/\s?hide/g, '');
            m = this.showText(m);
            this.toast.getElementsByTagName('span')[0].innerHTML = m; //文字填充
            _w, _h = this.toast.offsetHeight;
            // pad 为padding值 _w为元素宽度
            var pad = parseFloat(getStyle(this.toast, 'paddingLeft')),
                _w = getStyle(this.toast, 'width');
            _w = Object.prototype.toString.call(_w) == '[object Array]' ?
                _w[0] : (parseFloat(_w) + pad + pad).toFixed(2);
            tLeft = tLeft - _w / 2 + wid / 2;
            this.toast && (
                this.toast.style.top = top - _h - wid + 'px',
                this.toast.style.left = tLeft + 'px')
        }

var cir2 = new drag({
    el: '.cir_2',
    max: 100
});
var cir2 = new drag({
    el: '.cir_3',
    max: 50
});
var cir2 = new drag({
    el: '.cir_4',
    max: 5
});

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：兼容移动pc端拖拽进度条

兼容到火狐，ie8
el 值为绑定的元素，和css选择器相同
max 为最大显示值
目前只加了toast显示，后续会增加显示方式

讨论这个常用代码（0）回答他人问题或分享心得会奖励牛币

〒_〒居然一个评论都没有……

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取