draggable 拖动组件内嵌元素被默认为拖动元素的问题（困住了一整天）

 				<draggable
                    element="ul"`在这里插入代码片`
                    v-model="xxx"
                    animation="300"
                    class="draggable"
                    :scroll="false"
                    :force-fallback="true"
                    :disabled="setStyle"
                    handle=".itemList"
                  >
                  <div xxx
                    class="aaaa"
                    "
                  >
                  </div>
                    <div
                      v-for="(item, index) in xxx"
                      :key="index + ''"
                      :class=" xxx "
                    >
                        </div>
                      </div>
                      <p v-html="stringBar(`${item.name}`)" v-show-tips></p>
                    </div>
                  </draggable>

拖动组件如果内置的有其他元素，特别是元素在拖动模块之前的时候，每次拖动，都会打乱部分顺序，拖动最后一个元素的时候，会直接报错。
目测应该是把其他内嵌元素的索引也给了拖动组件，不绑定值的话可以，但是不会触发move等事件，绑定值的话就会出现如上问题。
各种办法都试过之后，得出结论

 <div xxx
                    class="aaaa"
                    slot="header"
                    "
                  >

必须使用官方给的默认插槽进行前后内置，否则逃不开那个问题，当然也可以用几个钩子函数进行处理，但是要麻烦一些，还要处理数组顺序等
内置 header 和 footer 插槽，元素会置于头或者尾