使用 Javascript 拖放表行？答案

【问题标题】：To drag drop table rows using Javascript?使用 Javascript 拖放表行？
【发布时间】：2011-03-06 16:17:12
【问题描述】：

我正在使用 HTML 表格来显示数据，我希望用户可以拖放表格行以根据需要对数据进行排序。表格的 HTML 代码：

<table id='datagrid'>
   <tbody>
      <tr>
         <td>1</td>
      </tr>
      <tr>
         <td>2</td>
      </tr>
      <tr>
         <td>3</td>
      </tr>
   </tbody>
</table>

我希望用户可以拖动行并根据需要进行排序...在 Javascript 中注意：不要使用 jQuery、Mootools 或任何其他 Javascript 库来回答，因为我想使用经典的 Javascript（即核心）。

【问题讨论】：

标签： javascript html-table

【解决方案1】：

无法定位表格行。无法更改顶部或左侧的值。

改为拖动“代理”元素，例如 div。

当 mousedown 发生时，如果事件目标是或包含您想要拖动的东西（它是一个 TR 或有一个您关心的 TR 祖先），则在此处显示代理并分配一个 mousemove 处理程序来更新代理坐标。

在 mouseup 事件中，隐藏代理（如上所述）并移除 mousemove 回调。如果表中发生了 mouseup 事件，则可以将源 TR 插入到新订单中。

为了使操作更加明显，可以将来自源 TR 的表示信息（例如其中的文本）复制到代理。源 TR 可以是灰色的（通过设置不透明度或背景颜色）。

当用户删除代理元素时，您可能还想为插入发生的位置提供一些指示符。

【讨论】：

【解决方案2】：

这个website 可以帮助您解决您的问题。它包含一个简短的教程和有效的 js 代码。

【讨论】：

【解决方案3】：

许多人将您指向框架的原因是，在拖放方面存在许多浏览器差异，而框架会为您处理所有这些。

但是，这些事件处理程序将为您提供一个公平的开始。

onDragStart - 当您开始将其拖动到某处时，它将在源元素上触发。

onDrop - 当您将鼠标悬停在目标元素上时“放开”源元素时，这将在目标元素上触发。

【讨论】：

所有主流浏览器都支持 onDragStart 和 onDrop 吗？？