0

I have several similar tables inside a page, and, using scriptaculous, I would like to drag and drop one row from one table to another. I can already do this with the code:

new Draggable('some-id').

Where 'some-id' is the table row id.

However, there is no visible drag, which is bad for user interaction...

Applying the same code to a simple div works fine, which makes me believe that it is a problem with dragging a table row.

Edit:

For example:

<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>

In this code, the div will have a visual drag (i.e. the div will follow the cursor), while the table row won't, even though I know it's being dragged.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
zync
  • 463
  • 3
  • 17
  • take a look at [this website](http://www.redips.net/javascript/drag-and-drop-table-content/). is this something you want to accomplish? – ClydeFrog Jun 11 '12 at 09:56
  • Kind of ;) In that website, you can drag and drop cells, while I only need to drag and drop rows. And doing it through scriptaculous would be better for me, since it's really simple. – zync Jun 11 '12 at 14:33
  • I'm not familiar with scriptaculous, are you certain that it can drag-drop rows between tables or is it only capable of drag-drop rows inside one table? – ClydeFrog Jun 11 '12 at 14:37
  • Well, the drag and drop is working. however the "ghost" that should appear attached to the cursor is not showing up as it should. – zync Jun 11 '12 at 14:48
  • ok so it's a "cosmetic"-matter. then maybe you haven't imported the "ghost"-library. are you just supposed to import the scriptaculous.js or is there more javascript's coming with it? – ClydeFrog Jun 11 '12 at 15:10
  • It's just the scriptaculous library. I know it's working because normal divs work the way it should – zync Jun 12 '12 at 08:23
  • give me an example on how it looks like when it works and when it fails – ClydeFrog Jun 12 '12 at 08:26
  • See the edit on my post. As you can see, the code looks very similar.. – zync Jun 12 '12 at 10:50

1 Answers1

0

So this is a problem with <div>s vs <tr>'s

a <div> can have an absolute position which allows the div to move wherever the mouse is but a tr lives within a table and thus cannot be moved about on the page

here is a jsfiddle to illustrate (tr is green, div is red)

http://jsfiddle.net/PUHPH/

no matter what coordinates you put in for the tr it will not move from the top left corner of the page - but the div will go where ever you put it

Geek Num 88
  • 5,264
  • 2
  • 22
  • 35