Drag Reorder moves wrong Row

[claudiobosticco]

SmartClient Version: v13.1p_2025-12-17/AllModules Development Only (built 2025-12-17)

I can confirm that it's working for me, thank you very much

[Isomorphic]

We backported a fix for this to SC 13.1 and newer branches. It's in the nightly builds dated 2025-12-16 and beyond.

[brunostuder]

Hi.
For me too it does not happen with the 15.0 Pre-Release.

But it happens with the current 14.1 Release. And yes, if I move sideways i will get the right row.

Should we use Version 15. And if yes, how can I download it using the isc:deploy maven plugin?

[claudiobosticco]

Can you confirm that if you click on the bottom edge of the row, but move sideways (not down) then you get the right row?

This won't matter after the backport, but we're just trying to confirm what's happening for you.

Yes, I can confirm that! (didn't notice it before)

[Isomorphic]

Can you confirm that if you click on the bottom edge of the row, but move sideways (not down) then you get the right row?

This won't matter after the backport, but we're just trying to confirm what's happening for you.

[claudiobosticco]

Hi Isomorphic, for me it doesn't happen with the latest 15.0 you linked to, but it does happen with the latest 13.1. Tested using Safari, Firefox and Chrome on MacOS

[Isomorphic]

Can either of you reproduce here:

https://smartclient.com/smartclient-...=gridsDragMove

There was a Nov 2025 fix for an issue where if you moved in the brief interval between mouseDown when the drag official starts (which people might do just from the act of physically pressing a button) you could end up on the next row down.

[brunostuder]

Hi

I tried with Linux Chrome:

Diagnostic sample loaded. Move mouse to bottom edge of a row, click and drag, then check console for output.
VM1371:253 === mouseDown ===
VM1371:254 offsetY: 60 | eventRow: 1 | record: China
VM1371:256 lastOverRow: 1
VM1371:275 === dragStart ===
VM1371:276 mouseDownEvent offsetY: 60 | row: 1 | record: China
VM1371:278 lastEvent offsetY: 66 | row: 2 | record: Japan
VM1371:280 lastOverRow: 1 | record: China
VM1371:282 last mouseMove was - offsetY: 65 | row: 2
VM1371:293 dragData: ['Japan']

[Blama]

Hi Isomorphic,

I can reproduce as well here (v13.1p_2025-12-05) with your code from #4: Click China, Move Japan.

Console log:

Diagnostic sample loaded. Move mouse to bottom edge of a row, click and drag, then check console for output. ISC_Core.js:362:9
=== mouseDown === ISC_Core.js:268:14
 offsetY: 61 | eventRow: 1 | record: China ISC_Core.js:269:14
 lastOverRow: 1 ISC_Core.js:271:14
=== dragStart === ISC_Core.js:290:13
 mouseDownEvent offsetY: 61 | row: 1 | record: China ISC_Core.js:291:13
 lastEvent offsetY: 66 | row: 2 | record: Japan ISC_Core.js:293:13
 lastOverRow: 1 | record: China ISC_Core.js:295:13
 last mouseMove was - offsetY: 66 | row: 2 ISC_Core.js:297:13
 dragData: Array [ "Japan" ]

I tried with Win11, FF146, no browser zoom, 4K, 250% system zoom.

Best regards
Blama

[Isomorphic]

Wow. What's really weird here is that the rollover is showing the correct row, and the exact same mechanism is used to determine the rollover row and the row that is clicked for the drag.

That leaves only two possibilities:

1) you physically moved the mouse by 1-2px as part of pressing the button

.. or ..

2) there is a very serious OS-level bug on your Linux machine where the coordinates of mouseMove events are different from the coordinates of mouseDown events, even if the mouse hasn't moved.

We say it has to be OS-level (or in your X server / window manager) because both Firefox and Chrome are effected.

As far as reports from users, it's almost certainly something else.

You can paste the following code into the Showcase sample to show you all of the coordinate, so you can verify that the input coordinates differ.

If you confirm that the coordinates differ, you can probably get the same thing to happen on any web page or possibly even OS dialogs. For example, go to the bottom edge of a button, click, and nothing will happen.

// Diagnostic version of Drag Move sample
  // Paste this into the Showcase "Try It" area, then open browser console

  isc.HStack.create({membersMargin:10, height:160, members:[
      isc.ListGrid.create({
          ID: "countryList1",
          width:300, height:224,
          data: countryData,
          fields:[
              {name:"countryCode", title:"Flag", width:65, type:"image", imageURLPrefix:"flags/24/",
  imageURLSuffix:".png"},
              {name:"countryName", title:"Country"},
              {name:"capital", title:"Capital"}
          ],
          canReorderRecords: true,
          canDragRecordsOut: true,
          canAcceptDroppedRecords: true,
          dragDataAction: "move",

          bodyProperties: {
              mouseMove : function () {
                  var offsetY = this.getOffsetY(),
                      eventRow = this.getEventRow(),
                      record = eventRow >= 0 ? this.grid.getRecord(eventRow) : null;

                  // Store last mouseMove info for comparison in dragStart
                  this._lastMoveInfo = {
                      offsetY: offsetY,
                      eventRow: eventRow,
                      recordName: record ? record.countryName : "(none)"
                  };

                  return this.Super("mouseMove", arguments);
              },

              mouseDown : function () {
                  var offsetY = this.getOffsetY(),
                      eventRow = this.getEventRow(),
                      record = eventRow >= 0 ? this.grid.getRecord(eventRow) : null;

                  console.log("=== mouseDown ===");
                  console.log(" offsetY:", offsetY, "| eventRow:", eventRow, "| record:", record ?
  record.countryName : "(none)");
                  console.log(" lastOverRow:", this.lastOverRow);

                  return this.Super("mouseDown", arguments);
              }
          },

          dragStart : function () {
              var EH = isc.EH,
                  mouseDownEvent = EH.mouseDownEvent,
                  body = this.body,
                  mouseDownOffsetY = mouseDownEvent ? body.getOffsetY(mouseDownEvent) : null,
                  mouseDownRow = mouseDownEvent ? this.getEventRow(body.getOffsetY(mouseDownEvent)) : null,
                  currentOffsetY = body.getOffsetY(),
                  currentRow = this.getEventRow();

              var mouseDownRecord = mouseDownRow >= 0 ? this.getRecord(mouseDownRow) : null,
                  currentRecord = currentRow >= 0 ? this.getRecord(currentRow) : null,
                  lastOverRecord = body.lastOverRow >= 0 ? this.getRecord(body.lastOverRow) : null;

              console.log("=== dragStart ===");
              console.log(" mouseDownEvent offsetY:", mouseDownOffsetY, "| row:", mouseDownRow, "| record:",
  mouseDownRecord ? mouseDownRecord.countryName : "(none)");
              console.log(" lastEvent offsetY:", currentOffsetY, "| row:", currentRow, "| record:",
  currentRecord ? currentRecord.countryName : "(none)");
              console.log(" lastOverRow:", body.lastOverRow, "| record:", lastOverRecord ?
  lastOverRecord.countryName : "(none)");
              console.log(" last mouseMove was - offsetY:", body._lastMoveInfo ? body._lastMoveInfo.offsetY :
  "?", "| row:", body._lastMoveInfo ? body._lastMoveInfo.eventRow : "?");

              if (mouseDownRow !== body.lastOverRow) {
                  console.warn(" >>> MISMATCH: mouseDownRow (" + mouseDownRow + ") != lastOverRow (" +
  body.lastOverRow + ")");
              }

              var result = this.Super("dragStart", arguments);

              var dragData = this.getDragData();
              console.log(" dragData:", dragData ? dragData.map(function(r) { return r.countryName; }) : []);

              return result;
          }
      }),
      isc.VStack.create({width:32, height:74, layoutAlign:"center", membersMargin:10, members:[
          isc.Img.create({src:"[SAMPLE]icons/32/arrow_right.png", width:32, height:32,
              click:"countryList2.transferSelectedData(countryList1)"
          }),
          isc.Img.create({src:"[SAMPLE]icons/32/arrow_left.png", width:32, height:32,
              click:"countryList1.transferSelectedData(countryList2)"
          })
      ]}),
      isc.ListGrid.create({
          ID: "countryList2",
          width:200, height:224, showAllRecords:true,
          fields:[
              {name:"countryCode", title:"Flag", width:65, type:"image", imageURLPrefix:"flags/24/",
  imageURLSuffix:".png"},
              {name:"countryName", title:"Country"}
          ],
          emptyMessage: "drop rows here",
          canReorderRecords: true,
          canDragRecordsOut: true,
          canAcceptDroppedRecords: true,
          dragDataAction: "move"
      })
  ]});

  console.log("Diagnostic sample loaded. Move mouse to bottom edge of a row, click and drag, then check console
  for output.");

[brunostuder]

I made the attached movie with chrome on my linux desktop.
The same also happens with firefox
No Plugins on both
And no, the rollover efect does not move to the wrong row

Our customers have the similar problems on their environments (mac, windows) but with a custom Skin

Because upload does not accept mp4 we made an animated gif. Hope it works, otherwise we need to publish the file somewhere

[Isomorphic]

We can't reproduce this - the selection is perfect down to the pixel. It's hard to image how you could possibly be seeing this. Questions:

1. does the rollover effect also move to the wrong row for you?

2. what browser are you using?

3. is there anyone else, other than you, that can see the problem?

4. do you have any custom installed in your browser - plugins or something?

[brunostuder]

If I use the "Drag reorder" example and click in the "China"
row close to the bottom edge of the row, the "Japan" row, which is directly below "China", is selected and
moved instead of "China".
Depending on the skin, the area where this error occurs is larger, and it becomes quite inconvenient for users.