使用javascript拖动删除表行？

Question

我正在使用HTML表来显示数据，我希望该用户可以根据需要对表行进行darg和dorp来对数据进行排序。 表格的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（即核心）..

Answer 1

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

但是，这些事件处理程序将为您提供一个良好的开端。

onDragStart - 当你开始将它拖到某个地方时，它将触发源元素。

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

Answer 2

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

而是拖动“代理”元素，例如div。

当mousedown发生时，如果事件目标是或者包含您要拖动的内容（它是TR或具有您关心的TR祖先），请在那里显示代理并分配更新代理协调项的mousemove处理程序。

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

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

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

Answer 3

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