使用scriptaculous在表之间拖动表行

时间:2012-06-11 09:51:36

标签: html-table drag-and-drop scriptaculous

我在页面中有几个类似的表,并且使用scriptaculous,我想将一行从一个表拖放到另一个表。我已经可以使用代码执行此操作:

new Draggable('some-id').

其中'some-id'是表行id。

然而,没有可见的拖拽,这对用户交互有害......

将相同的代码应用于简单的div工作正常,这让我相信拖动表格行是一个问题。

编辑:

例如:

<table>
<tr id="drag_tr"><td>Drag</td></tr>
</table>

<div id="drag_div">some content</div>

<script type="text/javascript">
new Draggable("drag_tr")
new Draggable("drag_div")
</script>

在这段代码中,div将有一个可视拖动(即div将跟随光标),而表行则不会,即使我知道它被拖动。

1 个答案:

答案 0 :(得分:0)

所以这是<div> s vs <tr>

的问题

<div>可以有一个绝对位置,允许div在鼠标移动的任何地方移动,但tr位于表格中,因此无法在页面上移动

这里有一个jsfiddle来说明(tr是绿色,div是红色)

http://jsfiddle.net/PUHPH/

无论你为tr设置什么样的坐标,它都不会从页面的左上角移动 - 但是div会放在你放置的地方