关于使用drag="true"列表排序的理解问题

Question

我对某人使用的drag事件作的列表排序的代码我使用VUE重写，出现了一些理解问题

<style lang="css" scoped>

ul>li {
    /* 去掉列表的点 */
    list-style: none;
    text-align: left;
    width: 600px;
    line-height: 30px;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-left: 2px solid #add8e6;
    margin-top: 10px;
    text-indent: 30px;
    box-shadow: 0 0 1px #6b6969;
}

ul>li:nth-child(even) {
    background-color: #FFFFFF;
}

ul>li:nth-child(odd) {
    background-color: mintcream;
    /* background-color: #FFFFFF; */
}

</style>

<template lang="html">

<div class="">
    <ul @dragstart="judgement" @dragover="exchange">
        <li @draggstart="test1" @dragover="test2" v-for="item in titles" draggable="true">{{ item }}</li>
    </ul>
</div>

</template>

<script>

let windows = {
    name: "windows"
};

export default {
    windows,
    data: function() {
            return {
                item:{"sdsd":"sdsdsdsd","wwwww":"qqhqqqqqqqq","aaaaaaaaaaaa":"fffffffff","sdddddddddddddddddddd":"sduuuu"} ,
                draging: undefined
            }
        },
    methods: {
            judgement: function(event) {
                console.log('jud');
                this.draging = event.target
            },
            exchange: function(event) {
                event.preventDefault()
                console.log('exchange');
                console.log(this.draging,event.target);
                let target = event.target
                if (target.nodeName === "LI") {
                    if (target !== this.draging) {
                        let targetRect = target.getBoundingClientRect()
                        let dragingRect = this.draging.getBoundingClientRect()
                        if (target) {
                            if (target.animated) {
                                return
                            }
                        }
                        if (this._index(this.draging) < this._index(target)) {
                            target.parentNode.insertBefore(this.draging, target.nextSibling)
                        } else {
                            target.parentNode.insertBefore(this.draging, target)
                        }
                        this._animate(dragingRect, this.draging)
                        this._animate(targetRect, this.draging)
                    }
                }
            },
            _index: function(el) {
                let index = 0
                if (!el || !el.parentNode) {
                    return -1
                }
                while (el && (el = el.preiousElementSibling)) {
                    console.log('进行了加法');
                    index++
                }
                return index
            },
            _animate: function(prevRect, target) {
                let ms = 300
                let that = this
                if (ms) {
                    let currentRect = target.getBoundingClientRect()
                    if (prevRect.nodeType === 1) {
                        prevRect = prevRect.getBoundingClientRect()
                    }

                    this._css(target, 'transition', 'none')
                    this._css(target, 'transform', 'translate3d(' + (prevRect.left - currentRect.left) + 'px,' + (prevRect.top - currentRect.top) + 'px,0')

                    target.offsetWidth

                    this._css(target, 'transition', 'all ' + ms + 'ms')
                    this._css(target, 'transform', 'translate3d(0,0,0)')

                    clearTimeout(target.animated)
                    target.animated = setTimeout(function() {
                        console.log(this); //this指向
                        that._css(target, 'transition', '')
                        that._css(target, 'transform', '')
                        target.animated = false
                    }, ms)
                }
            },
            _css: function(el, prop, val) {
                let style = el && el.style
                if (style) {
                    if (val === void 0) {
                        if (document.defaultView && document.defaultView.getComputedStyle) {
                            val = document.defaultView.getComputedStyle(el, '')

                        } else if (el.currentStyle) {
                            val = el.currentStyle
                        }

                    }
                    return prop === void 0 ? val : val[prop]
                } else {
                    if (!(prop in style)) {
                        prop = '-webkit-' + prop
                    }
                    style[prop] = val + (typeof val === 'string' ? '' : 'px')
                }
            },
            test1: function(ev) {
                console.log("1"+ev.target);
            },
            test2: function(ev) {
                console.log("2");
                console.log(ev.target);
            }
        }
}

</script>

问题：

• 问题一

     while (el && (el = el.preiousElementSibling)) {
                    console.log('进行了加法');
                    index++
                }

这一段是起什么作用，这个el=el.preiousElementSibling 找它的兄弟元素有什么作用

• 问题二

打印测试中对它我写上的函数 test1 为什么不执行