Opened 13 years ago

Closed 12 years ago

#2428 closed defect (fixed)

Table drag and drop of rows causes misordering internally versus visually

Reported by: guest Owned by: Eugene Lazutkin
Priority: high Milestone: 1.0
Component: DnD Version: 0.4.1
Keywords: Cc: jn534@…
Blocked By: Blocking:

Description

After fixing the typo on line 136 of src/dnd/HtmlDragAndDrop.js (changing tdp into tmpSrcTr -- already fixed for 0.4.2 in subversion) I have found that dragging and dropping of table rows can causes the internal and external views of the table to be misaligned. Perform the following steps on the code snippet below:

  1. Click button (note rows are in order in the popup "row1 row2 row3 row4")
  2. Drag the fourth row up (note that you can only drop it above the first row -- note also that visually the row didn't move)
  3. Click button (note that the rows are now "row4 row1 row2 row3" even though the visual hasn't changed)

Using: Firefox Linux 1.5.0.8 (also verified on Firefox Windows 2.0.0.1)

Note: When using IE 6.0.2900.2180.xpsp_sp2_gdr.050301-1519 the fourth row vanishes completely but when clicking the button "row4 row1 row2 row3" appears in the popup.

I have not seen this happen with other HTML structures such as div or ul.

I've CCed my email address in case you need any more information.


<html>
<head>
<title>Drag-and-drop Table Test</title>
<script type="text/javascript">
  var djConfig = {isDebug: true};
</script>
<script type="text/javascript" src="/js/dojo/dojo.js"></script>
<script type="text/javascript">
  dojo.require("dojo.dnd.*");
  dojo.require("dojo.event.*");

  function init() {
    var dl = document.getElementById("dragTable");
    var lis = dl.getElementsByTagName("tr");
    for (var x = 0; x < lis.length; x++) {
      new dojo.dnd.HtmlDragSource(lis[x], "tr-list");
    }
    new dojo.dnd.HtmlDropTarget(dl, ["tr-list"]);
  }

  function checkTableOrder() {
    var t = document.getElementById("dragTable");
    var lis = t.getElementsByTagName("tr");
    var s = "Row order:  ";
    for (var x = 0; x < lis.length; x++) {
      s = s + lis[x].id + " ";
    }
    window.alert(s);
  }

  dojo.event.connect(dojo, "loaded", "init");
</script>
</head>
<body>

<h1>Drag-and-Drop Table Test</h1>

<table id="dragTable" cellspacing=0 cellpadding=15>
 <tbody>
  <tr bgcolor="#ffffff" id="row1">
   <td>1</td>
   <td>First Row</td>
   <td>Element</td>
  </tr>
  <tr bgcolor="#cccccc" id="row2">
   <td>2</td>
   <td>Second Row</td>
   <td>Element</td>
  </tr>
  <tr bgcolor="#ffffff" id="row3">
   <td>3</td>
   <td>Third Row</td>
   <td>Element</td>
  </tr>
  <tr bgcolor="#cccccc" id="row4">
   <td>4</td>
   <td>Fourth Row</td>
   <td>Element</td>
  </tr>
 </tbody>
</table>

<form><input type=button value="Check Row Order" onclick="checkTableOrder()"></form>

</body>
</html>

Change History (2)

comment:1 Changed 12 years ago by bill

Component: GeneralDnD
Milestone: 1.0
Owner: changed from anonymous to Eugene Lazutkin

Setting this to 1.0 but feel free to change the milestone. Probably it's no longer an issue?

comment:2 Changed 12 years ago by Eugene Lazutkin

Resolution: fixed
Status: newclosed

Fixed in 0.9.

Note: See TracTickets for help on using tickets.