JS组件Bootstrap Table表格多行拖拽效果实现代码

Bootstrap Table的多行拖拽新境界

二、效果展示

2. 拖动中：选中行开始拖动时，目标位置的其他行会稍作避让，为被拖动行腾出空间。

4. 撤销回到拖动前状态：提供撤销功能，轻松恢复到拖拽前的状态。

三、需求分析

在实现多行拖拽功能时，我们首先需要找到一个合适的拖拽容器。在Bootstrap Table中，tbody是一个理想的候选。由于tr标签嵌套在tbody中，注册tbody的拖拽功能可以确保在不干扰原有样式和布局的前提下实现拖拽效果。接下来我们重点如何实现这一功能。

四、代码示例

在cshtm文件中保持Bootstrap Table的常规结构，无需进行特殊改动。接下来，我们关注JavaScript部分。为了实现多行拖拽效果，我们需要使用到一些JavaScript库如jQuery和Sortable.js。具体实现步骤如下：

1. 引入jQuery和Sortable.js库。

```javascript

$('yourTableBodyId').sortable({

// 配置项...

});

```

```javascript

$('tb_order_left tbody').draggable({

helper: "clone", // 使用克隆的方式实现拖拽效果

start: function (event, ui) {

// 记录拖拽开始时的数据状态

var old_left_data = JSON.stringify($('tb_order_left').bootstrapTable("getData"));

var old_right_data = JSON.stringify($('tb_order_right').bootstrapTable("getData"));

var odata = { index: ++i_statuindex, left_data: old_left_data, right_data: old_right_data };

arrdata.push(odata); // 将数据存入数组用于后续撤销操作

},

// 其他配置项...

});

```

三、撤销操作

当用户点击“撤销”按钮（带有id "btn_cancel"）时，会触发一系列操作。如果当前状态索引 `i_statuindex` 小于或等于0，那么直接返回，不进行任何操作。

四、操作效果与不足

五、优化方案

1、注册Drag的方法

一、源码解读

调用`oTableInit.InitDrag()`函数来初始化拖拽功能。至此，拖拽交互基本完成。

二、功能重塑与体验优化

理解源码后，我们可以进一步优化用户体验。可以加入更多的交互提示，比如当用户拖拽一行时，显示一个预览效果，这样用户就能更清楚地知道他们将行放置到何处。这可以通过使用CSS和JavaScript的拖拽API来实现。

考虑到不同浏览器的兼容性问题，建议在实现拖拽功能时加入必要的兼容性处理，以确保在主流浏览器上都能正常工作。