vue移动端拖动排序

Posted 2022-01-28 weixin_43553755

vue移动端拖动排序

前言

我们移动端排序，如果使用drag拖动事件会有重影，在移动端会显得不是很友好，还是需要控制dom的位置去实现。效果自己复制代码运行就可以看到效果；

一、直接上代码

<template>
    <div class="old_sort_main">
        <div class="show_func">已显示功能</div>
        <!--下面是一个容器-->
        <div id="sort_content"></div>
    </div>
</template>

<script>
export default 
    data() 
        return 
            funcManager: ['转账', '生活缴费', '存款产品', '客户经理', '我的账户','未显示功能', '账户明细','设置'],
            domHeight: 50,
            children: [],
            target: null,
            moveTop: 0,
            targetNum: 0
        
    ,
    mounted() 
        // 这是一个渲染函数
        this.render(this.funcManager);
        // 内部函数的this不是指向vue实例
         let _this = this;
        // 鼠标松开设置最终落下位置
        document.ontouchend = function() 
            // 解绑ontouchmove函数
            document.ontouchmove = null
            if (!_this.target) return null
            const nowNum = Math.round(_this.moveTop / _this.domHeight)
            if (nowNum >= _this.children.length - 1) 
            _this.target.style.top = (_this.children.length - 1) * _this.domHeight + 'px'
             else if (nowNum <= 0) 
            _this.target.style.top = '0px'
             else 
            _this.target.style.top = nowNum * _this.domHeight + 'px'
            
            var arr = [];
            for(let i =0; i < document.getElementsByClassName('item').length; i++) 
                let index = (document.getElementsByClassName('item')[i].style.top.split('px')[0]/_this.domHeight);
                let val = document.getElementsByClassName('item')[i].children[0].outerText;
                arr[index] =  val;
            
            for(let i =0; i < document.getElementsByClassName('drag').length; i++) 
                document.getElementsByClassName('drag')[i].ontouchend = null;
            
            document.getElementById('sort_content').innerhtml = '';
            console.log(102012, arr)
            _this.render(arr);
            _this.moveTop = 0
            _this.targetNum = 0
        
    ,
    methods: 
        render(list) 
            let root = document.getElementById('sort_content');
            root.style.height = list.length * this.domHeight + 'px';
            this.children = [];
            // 循环插入节点
            for (let i = 0, len = list.length; i < len; i++) 
                let item = '<span class="dragValue">' + list[i] + '</span>'
                if(list[i] === '未显示功能') 
                    item = '<span class="ston">' + list[i] + '</span>' 
                
                const div = document.createElement('div')
                div.className = 'item'
                // const span = document.createElement('img')
                // span.src = require('@/assets/images/oldVersion/more_old.png')
                const span = document.createElement('span')
                span.className = 'drag'
                // if(list[i] === '未显示功能') 
                //     span.className = 'undrag'
                // 
                if(list[i] === '未显示功能') 
                    span.className = 'undrag'
                 else 
                    span.innerHTML = '可拖动部分'
                
                div.innerHTML = item
                div.appendChild(span)
                div.style.top = i * this.domHeight + 'px'
                div.style.height = this.domHeight + 'px'
                this.children.push(div)
                // 插入到排序根节点
                root.appendChild(div)
                // 给拖拽部分添加拖拽事件
                this.domDrag(span, i)
            
        ,
        // 拖拽
        domDrag(span, i) 
            let timer;
            let flag = false;
            let _this = this;
            span.ontouchstart = function(e) 
            // 控制长按时间
            timer = setTimeout(() => 
                flag = true;
            , 200)
            const top = e.touches[0].clientY - span.parentNode.offsetTop
            _this.target = span.parentNode;
            _this.targetNum = Math.round(span.parentNode.offsetTop / _this.domHeight)
            _this.target.style.top = i*_this.domHeight +'px'
            _this.moveTop = i*_this.domHeight;
            document.ontouchmove = function(e) 
                    if(!flag) 
                        return;
                    
                    _this.moveTop = e.touches[0].clientY - top
                    _this.target.style.top = _this.moveTop +'px'
                    _this.target.style.boxShadow = '0px 0px 5px #888888';
                    _this.target.style.zIndex = '1000';
                    _this.domMove();
                
            
            span.ontouchmove = function() 
                clearTimeout(timer);
            
            span.ontouchend = function() 
                clearTimeout(timer);
            
        ,
        // 交换位置
        domMove() 
            const nowNum = Math.round(this.moveTop / this.domHeight)
            for (let i = 0, len = this.children.length; i < len; i++) 
                const item = this.children[i]
                if (this.target === item) 
                    continue
                
                const itemNum = parseInt(item.style.top) / this.domHeight
                if (itemNum === nowNum) 
                    if (itemNum < this.targetNum) 
                    item.style.top = parseInt(item.style.top) + this.domHeight + 'px'
                     else if (itemNum > this.targetNum) 
                    item.style.top = parseInt(item.style.top) - this.domHeight + 'px'
                    
                    this.targetNum = Math.round(this.moveTop / this.domHeight)
                    return null
                
            
        
    ,

</script>

<style lang="stylus" scoped>
.old_sort_main 
    position relative
    .show_func 
        width: 100%;
        left: 0;
        height: 106px;
        line-height: 106px;
        text-indent: 32px;
        font-size: 36px;
        color: #999999;
        background-color: #E5E5E5;
    
    .dragValue 
        font-size: 36px;
        color: #333333
    

</style>
<style>
#sort_content 
    position: absolute;
    width: 100%;
    background-color: #ffffff;

.old_sort_main 
    font-size: 36px;

.old_sort_main .dragValue 
    font-size: 36px;
    color: #333333

.old_sort_main .drag 
    margin-right: 32px;

.old_sort_main .undrag 
    display: none;

.old_sort_main .item 
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-indent: 32px;
    background-color: #ffffff;

.old_sort_main .ston 
    height: 106px;
    width: 100%;
    line-height: 106px;
    text-indent: 32px;
    font-size: 36px;
    color: #999999;
    background-color: #E5E5E5;

.old_sort_main .item 
    width: 100%;
    position: absolute;
    left: 0;
    display: flex;
    align-items: center;

</style>

2.运行效果如下


总结

效果自己复制代码运行就可以看到效果；