移动端拖动集合(适配下的边界值,点透问题,细节处理,惯性的运用,行内控制宽度)

html.

    <section class="page allCelebrity">
            <div class="c-title"><i></i><span>历史名人</span></div>
            <div class="celebrity">
                <div class="input">
                    <i class='fl'></i>
                    <input type="" name="" placeholder='请输入您想要了解的名人(限广东)'>
                </div>
                <ul class="list clearfix">
                    <!-- <li class='last'><a href="javascript:void(0)"><span>等等</span></a></li> -->
                </ul>
            </div>
            <div class="details">
                <!-- <img src='./img/celebrity1.gif' alt="" width="100%" height='100%'>
                <div class="des">
                    <p></p>
                </div>
                <div class="close"></div> -->
            </div>
        </section>

---

行内控制宽度

css==>.list li 的处理

.allScenic .scenic{
    width: 100%;
}
.allScenic .title {
    width: 370px;
    margin: 0 20px;
}

.scenic ul li {
    height: 105px;
    padding: 15px 20px;
}
.scenic ul li a {
    display: block;
}
.scenic ul li a img {
    display: block;
    width: 105px;
    height: 105px;
    border-radius: 5px;
}
.scenic .introduce {
    margin-left: 15px;
    width: 250px;
    height: 105px;
}
.scenic .introduce p {
    margin-top: 8px;
}
.scenic .introduce .s-title {
    font-size: 20px;
    color: #333;
}
.scenic .introduce .des {
    color: #00A7E1;
}
.allScenic .more {
    margin: 0 20px;
}
    /*allCelebrity strat*/

.allCelebrity {
    width: 100%;
    height: 508px;
    background: url('../img/celebrity-bg.jpg') no-repeat center center/cover;
}
.allCelebrity .c-title {
    width: 180px;
    height: 60px;
    padding: 60px 0;
    margin: 0 auto;
}
.allCelebrity .c-title i {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: url('../img/celebrity-icon1.png') no-repeat center center/100% 100%;
    vertical-align: middle;
}
.allCelebrity .c-title span {
    font-size: 30px;
    font-family: 'KaiTi';
    color: #fff;
    vertical-align: middle;
}
.celebrity {
    margin: 0 20px;
}
.celebrity .input{
    width: 100%;
    height: 42px;
    line-height: 42px;
    background: #fff;
    border-radius: 21px;
}
.celebrity .input i {
    display: block;
    width: 18px;
    height: 18px;
    margin: 12px 10px 0 60px;
    background: url('../img/search.png') center center/cover;
}
.celebrity .input input {
    width: 280px;
    border: none;
    outline: none;
    color: #666;
}
.celebrity .list {
    margin-top: 20px;
}
.celebrity .list li {
    display: inline-block;
    overflow: hidden;
    padding: 5px 10px;
    margin: 5px;
    background: #fff;
    border-radius: 30px;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.celebrity .list li a {
    display: inline;
    text-align: center;
}
.celebrity .list li a i {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background: url('../img/celebrity-icon.png') center center/cover;
    vertical-align: middle;
}
.celebrity .list li a span {
    color: #999;
    vertical-align: middle;
}



.allCelebrity .details {
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(0,0,0,.7);
    opacity: 0;
    z-index: 100;
}
.allCelebrity .details img {
    display: block;
    width: 170px;
    height: 240px;
    margin: 40px auto;
}
.allCelebrity .details .des {
    margin: 0 20px;
}
.allCelebrity .details .des p {
    text-indent: 2em;
    color: #fafafa;
    margin-bottom: 20px;
}
.allCelebrity .details .close {
    position: absolute;
    top: 15px;
    right: 20px;
    width: 25px;
    height: 25px;
    background: url('../img/close.png') center center/cover;
}

---

适配下的边界值,点透问题,细节处理,惯性的运用

js.

// 名人
(function () {
    var oUl = document.querySelector('.celebrity .list'),
        last = oUl.querySelector('.last'),
        details = document.querySelector('.allCelebrity .details'),
        targetData = data.AllCelebrity;
        // <li class='last'><a href="javascript:void(0)"><span>等等</span></a></li>
    for (var i = 0; i < targetData.length; i++) {
        create(targetData[i],i);
    }
    function create(obj,i){
        var li = document.createElement('li');
        li.index = i;
        li.innerHTML = `
            <a href="javascript:void(0)"><i></i><span>${obj.name}</span></a>
        `;
        oUl.insertBefore(li,last);
    }
    oUl.addEventListener('click',click,false);
    function click(e){
        var e = e || window.event,
            target = e.target || e.srcElement;
        if(target.tagName.toLowerCase() == 'span') {
            // 拿到li;
            var parent = target.parentNode.parentNode;
            createDetail(parent.index);
        }
    }
    /*
        <img src='./img/celebrity1.gif' alt="" width="100%" height='100%'>
        <div class="des">
            <p></p>
        </div>
        <div class="close"></div>
     */
    function createDetail(i) {
        // 阻止默认滚轮事件
        // document.addEventListener('touchmove',move,false);
        var str = `
            <img src='./img/celebrity${i+1}.gif' alt="" width="100%" height='100%'>
            <div class="des">
                <p>${targetData[i].experience}</p>
            </div>
        `;
        details.innerHTML = str;
        // 关闭按钮 事件.
        var close = document.createElement('div');
        close.className = 'close';
        // 防止误触 ,点透问题.
        var start = {x:0,y:0},end = {x:0,y:0};
        close.addEventListener('touchstart',function(e){
            start.x = e.changedTouches[0].pageX;
            start.y = e.changedTouches[0].pageY;
        });
        close.addEventListener('touchend',function(e){
            end.x = e.changedTouches[0].pageX;
            end.y = e.changedTouches[0].pageY;
            if(end.x === start.x && end.y === start.y){
                e.stopPropagation();
                var timer = null;
                AnimateTime(details,{opacity:0},'500','easeIn',function(){
                    clearTimeout(timer);
                    timer = setTimeout(function(obj){
                        obj.innerHTML = '';
                        obj.style.display = 'none';
                        obj.style.marginTop = '0';
                    },500,this);
                })
                // 恢复默认滚轮事件
                document.removeEventListener('touchmove',move,false);
            }
        })
        details.appendChild(close);
        // 显示
        AnimateTime(details,{opacity:100},'500','easeIn',function(){
            this.style.display = 'block';
            //添加details 拖动事件
            addEvent(this);
        })
    }
    // 默认滚轮事件
    function move(e){
        e.preventDefault();
    }
    // details 拖动事件
    function addEvent(obj){
        console.log(details.offsetHeight); //总高
        console.log(window.screen.height/scale); //缩放过的屏幕高
        // 边界值 = 总高 - 缩放过的屏幕高
        var start = {
            y:0
        },end = {
            y:0
        },
        startTime = 0
        // marginTop 值
        val = 0,
        // 下拉的边界值. 负值
        boundaryValue = details.offsetHeight-(window.screen.height/scale);

        obj.addEventListener('touchstart',touch,false);
        obj.addEventListener('touchmove',touch,false);
        obj.addEventListener('touchend',touch,false);
        function touch(e){
            var distance = 0;
            switch(e.type){

                case 'touchstart':
                e.stopPropagation();
                start.y = e.changedTouches[0].pageY;
                this.style.WebkitTransition = this.style.transition = '';
                // 初始化
                console.log(getStyle(this,'marginTop'));
                this.startY = getStyle(this,'marginTop');
                startTime = Date.now();
                    break;

                case 'touchmove':
                e.stopPropagation();
                //阻止默认拖动事件
                e.preventDefault();
                end.y = e.changedTouches[0].pageY;
                val = end.y - start.y + this.startY;
                // 边界限制
                if(val > 0 ){ //拖动系数. 拉力的感觉
                    val *= 0.2;
                }else if( val < -boundaryValue){  //最后.
                    val = (end.y - start.y)*0.2 + this.startY;
                }
                this.style.marginTop = val + 'px';
                    break;

                case 'touchend':
                e.stopPropagation();
                this.style.WebkitTransition = this.style.transition = '.5s';
                // 防止点击. 重新获取
                end.y = e.changedTouches[0].pageY;
                /*惯性*/
                var T = Date.now()-startTime;
                    S =  end.y - start.y;
                    v = (S/T)*100;
                console.log(v);
                val +=v;
                 // 边界值 = 总高 - 缩放过的屏幕高
                 // console.log(val ,boundaryValue);
                 if(val > 0){
                    val = 0
                 }else if(val <= -boundaryValue ){
                    val = - boundaryValue;
                 }
                 this.style.marginTop = val + 'px';
                    break;
            }
        }

    }
})();

function getStyle(obj,attr){
    var val = obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
    return parseInt(val);
}

数据有点大,就不放了.

看看演示.
..