js 多选框里的元素拖动排序

一、需求背景：

               项目要求在多选的情况下对已选择的值进行手动拖动排序

二、设计分析：

               我们正常的js插件中没有此功能，需要拖动里面的元素，就需要添加在生成的已选择的li元素里添加h5属性（draggable="true"），这样我们才能有拖动元素的这个效果。然后我们在select初始化的页面再监听拖动事件。除了核心的拖动外，我们还需要注意两件事，一件事是拖动完毕后发送请求后的再次修改操作，这要求返回的值我们要按照顺序显示上去，因为使用过select相关插件的都知道，默认显示值得顺序跟下拉列表的顺序有关系，其次就是如果我们需要根据某些条件需要改变下拉框里的值，需要关注默认值是否在下拉框中，如果没有需要剔除。

三、示意图

 

四、核心代码

1. 我们需要在插件中找到生成已选择值得HTML，加上draggable="true"的属性，让元素可以拖动（这个是我使用插件源代码，在里面添加此属性）
2. 添加拖动事件的监控，并写好监控事件的处理逻辑（代码是vue框架，只参照核心js就好了）

    this.$nextTick(function () {