使用vuedraggable实现列表的拖拽排序，点击列表上的图标对列表进行处理操作

1、使用vuedraggable实现列表的拖拽排序

2、列表项的右侧有两个icon图标，点击弹出element-ui中的dialog对话框，左图标是重新编辑，右图标是删除功能

问题：如何在点击span的时候获取当前点击li的下标

<vue-draggable
    v-model: listData
    :move="onMove"
    @start="isDragging = true"
    @end="draggableEnd"
>
    <transition-group type="transition" tag="ul">
        <li v-for="(item, index) in listData" :key="index">
            <p>
                {{显示的文字}}
            </p>
            <div>
                <span class="iconfont icon-bainjixiugai" @click="updateClick"></span>
                <span class="iconfont icon-shanchu"></span>
            </div>
        </li>
    </transition-group>
</vue-draggable>

<vue-draggable
    v-model: listData
    :move="onMove"
    @start="isDragging = true"
    @end="draggableEnd"
>
    <transition-group type="transition" tag="ul">
        <li v-for="(item, index) in listData" :key="index">
            <p>
                {{显示的文字}}
            </p>
            <div>
                <span class="iconfont icon-bainjixiugai" @click="updateClick(item,index)"></span>
                <span class="iconfont icon-shanchu" @click="deleteClick(item,index)"></span>
            </div>
        </li>
    </transition-group>
</vue-draggable>