html如何调整选项的显示顺序的插件

如果你用过 jQuery UI，那么你应该会知道它内置有一个拖动排序(sortable)的功能。今天给大家推荐一个轻量级的拖动排序插件，让你能够摆脱 jQuery UI。

HTML5 Sortable 是一个简单易用的轻量级 jQuery 插件，它可让你轻松实现列表的拖动排序功能，它基于原生 HTML5 的拖动 API 而实现。更重要的一点是它支持包括 IE 在内的所有主流浏览器。

如何使用

请参考http://farhadi.ir/projects/html5sortable/

首先引入 jQuery 框架HTML5 Sortable 插件。

1、<script src="jquery.min.js"></script>

2、<script src="jquery.sortable.js"></script>

然后像这样添加一个 UL 列表，同时可以再加上自定义的样式。

<ul class="sortable"

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

<li>Item 4</li>

</ul>

最后初始化 

//初始化

$('.sortable').sortable()

//绑定方法:当改变排序后执行

$('.sortable').sortable().bind('sortupdate', function() {//Triggered when the user stopped sorting and the DOM position has changed. })

//移除拖动排序功能

$('.sortable').sortable('destroy')

el-table实现拖拽排序效果：

    

首先我们需要引入import Sortable from "sortablejs"

const tbody = document.querySelector(

                //获取el-table中的 tbody 的dom

                ".el-table__body-wrapper tbody"

            )

            this.tableObject = Sortable.create(tbody, {

                onEnd: ({ newIndex, oldIndex }) =>{

                    // 获取当前节点的数据

                    let currRow = this.tableData.splice(oldIndex, 1)[0] //this.tableData是你el-table渲染的数据 注意是你自己的数据

                    // 替换到新节点上

                    this.tableData.splice(newIndex, 0, currRow)

                    let dirSortList = this.tableData.map((v) =>{

                        return v.id

                    })

                    this.liSort(dirSortList.join(",")) //this.liSort() 这个方法是我调用后端的接口 传当前排序好的id 此处换为你们自己的方法

                },

            })

以上就是我们实现拖拽排序的功能

我们将此组件用到项目中如果不是同时复用，不会出现问题的 如 ：

//pub-table是我封装的一个拖拽功能的组件 命名看你们自己

                <pub-table

                    ref="first"

                    :classify="classify"

                    :table-data="tableData"

                    :org-id="orgId"

                    @search="search"

                ></pub-table>

我们在直接引用的时候并不会出现问题，但是如果我们在el-tabs中去多次引用就会出现问题

<el-tabs

            ref="tab"

            v-model="activeName"

            @tab-click="handleClick"

        >

            <el-tab-pane label="test1" name="1">

                <pub-table

                    v-if="activeName == 1"

                    ref="first"

                    :classify="classify"

                    :table-data="tableData"

                    :org-id="orgId"

                    @search="search"

                ></pub-table>

            </el-tab-pane>

            <el-tab-pane label="tets2" name="2">

                <pub-table

                    ref="second"

                    :classify="classify"

                    :org-id="orgId"

                    :table-data="tableData"

                    @search="search"

                ></pub-table>

            </el-tab-pane>

        </el-tabs>

这是我们发现我们在el-tabs中引入了两次排序组件 我们在使用的时候只有第一次引入的那个拖拽排序组件才可以使用

（具体原因还不清楚，盲猜应该和dom的加载有关系）

解决方案：

我们在每个组件上加一个 v-if 这样的话每次切换tabs的时候 组件都会重新加载 如：

      <pub-table

                    v-if="activeName == 1" // active为tabs绑定的data值 切换tabs的时候会绑定到 activeName上 会获取name值

                    ref="second"

                    :classify="classify"

                    :org-id="orgId"

                    :table-data="tableData"

                    @search="search"

                ></pub-table>

            </el-tab-pane>

这样一个完整的拖拽排序就完成了

---