vue 關(guān)于置頂div的問題

圖片描述

兩個(gè)div，點(diǎn)擊第二個(gè)div里面的置頂，會(huì)和第一個(gè)互換位置，會(huì)排到首個(gè)位置，如下圖

圖片描述

以下是代碼（已經(jīng)把css部分代碼忽略）

模板代碼

<template>
    <div>
        <div
            class="follow_contents_wrap"
            v-for="(list,index) in follow_contents"
            @mouseenter="btnsNow=index"
            @mouseleave="btnsNow=-1"
            v-dragging="{ item : list,list : follow_contents }"
            :key="list.title">
            <div 
                class="follow_contents_title_wrap">
                <div 
                    class="follow_contents_title_left"
                    @click="showList===index ? showList=-1 : showList=index"
                    :style="{borderBottom: '1px solid rgba(240,240,240,'+ changebackgroundopacity +')'}">
                    <div 
                        class="follow_contents_title_icon"
                        :class="index===showList?'':'special_none'">
                        <em></em>
                    </div>
                    <div class="follow_contents_title_name">
                        <span>
                            {{ list.title }}
                        </span>
                    </div>
                    <div class="follow_contents_title_counts">
                        <span>
                            (
                            {{ list.counts }}
                            )
                        </span>
                    </div>
                    <div class="div_clear"></div>
                </div>
                <div 
                    class="follow_contents_title_right"
                    v-show="index===btnsNow">
                    <div>
                        <span>添加</span>
                    </div>
                    <div
                        :class="index===0 ? 'top_index' : ''"
                        @click="">
                        <span>置頂</span>
                    </div>
                    <div class="div_clear"></div>
                </div>
            </div>
            <div 
                class="follow_contents_bottom"
                v-show="index===showList">
                <div></div>
            </div>
        </div>
    </div>
</template>

js部分代碼

export default{
    props: ['changebackgroundopacity'],
    data(){
        return{
            showList: '0',
            follow_contents: [
                {
                    title: '我的導(dǎo)航',
                    counts: '0'
                },
                {
                    title: '我的星座',
                    counts: '0'
                }
            ],
            btnsNow: '0'
        }
    }
}

求大神指教

回答

編輯回答

老梗

圖片描述
已經(jīng)解決，謝謝各位大神，如圖

2017年1月13日 10:29

編輯回答

互擼娃

只要把'我的導(dǎo)航'這項(xiàng)插入到數(shù)組最前就行了。

 <span @click='toTop(index)'>置頂</span>

toTop(index){
    this.follow_contents.unshift(...this.follow_contents.splice(index,1))
}

2017年2月6日 22:10

編輯回答

假灑脫

let arr = [0, 1, 2, 3]
function toTop (index) {
    if (index >= arr.length || index === 0) {
        return
    }
    let tempArr = JSON.parse(JSON.stringify(arr))
    return tempArr.splice(index, 1).concat(tempArr)
}

2018年7月26日 09:57