Drag and Drop buggy with jQuery 1.3 in Drupal 6.x

The fix was done by Quicksketch here in the Drupal 7 update: #350275: Update to jQuery 1.3.2..... http://drupal.org/node/350275#comment-1307414

To be precise with what's going on is that if you drag an item carefully around, you can have it disappear.

===================================================================
RCS file: /cvs/drupal/drupal/misc/tabledrag.js,v
retrieving revision 1.23
diff -u -r1.23 tabledrag.js
--- misc/tabledrag.js	18 Feb 2009 13:46:52 -0000	1.23
+++ misc/tabledrag.js	2 Mar 2009 06:52:15 -0000
@@ -206,7 +206,7 @@
     self.rowObject = new self.row(item, 'mouse', self.indentEnabled, self.maxDepth, true);
 
     // Save the position of the table.
-    self.table.topY = self.getPosition(self.table).y;
+    self.table.topY = $(self.table).offset().top;
     self.table.bottomY = self.table.topY + self.table.offsetHeight;
 
     // Add classes to the handle and row.
@@ -486,31 +486,6 @@
 };
 
 /**
- * Get the position of an element by adding up parent offsets in the DOM tree.
- */
-Drupal.tableDrag.prototype.getPosition = function(element){
-  var left = 0;
-  var top  = 0;
-  // Because Safari doesn't report offsetHeight on table rows, but does on table
-  // cells, grab the firstChild of the row and use that instead.
-  // http://jacob.peargrove.com/blog/2006/technical/table-row-offsettop-bug-in-safari
-  if (element.offsetHeight == 0) {
-    element = element.firstChild; // A table cell.
-  }
-
-  while (element.offsetParent){
-    left   += element.offsetLeft;
-    top    += element.offsetTop;
-    element = element.offsetParent;
-  }
-
-  left += element.offsetLeft;
-  top  += element.offsetTop;
-
-  return {x:left, y:top};
-};
-
-/**
  * Get the mouse coordinates from the event (allowing for browser differences).
  */
 Drupal.tableDrag.prototype.mouseCoords = function(event){
@@ -528,9 +503,9 @@
  * element. To do this we need the element's position and the mouse position.
  */
 Drupal.tableDrag.prototype.getMouseOffset = function(target, event) {
-  var docPos   = this.getPosition(target);
+  var docPos   = $(target).offset();
   var mousePos = this.mouseCoords(event);
-  return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
+  return { x: mousePos.x - docPos.left, y: mousePos.y - docPos.top };
 };
 
 /**
@@ -547,16 +522,8 @@
   for (var n=0; n<rows.length; n++) {
     var row = rows[n];
     var indentDiff = 0;
-    // Safari fix see Drupal.tableDrag.prototype.getPosition()
-    if (row.offsetHeight == 0) {
-      var rowY = this.getPosition(row.firstChild).y;
-      var rowHeight = parseInt(row.firstChild.offsetHeight)/2;
-    }
-    // Other browsers.
-    else {
-      var rowY = this.getPosition(row).y;
-      var rowHeight = parseInt(row.offsetHeight)/2;
-    }
+    var rowY = $(row).offset().top;
+    var rowHeight = parseInt($(row).outerHeight()) / 2;
 
     // Because we always insert before, we need to offset the height a bit.
     if ((y > (rowY - rowHeight)) && (y < (rowY + rowHeight))) {
@@ -568,6 +535,13 @@
           }
         }
       }
+      else {
+        // Do not allow a row to be swapped with itself.
+        if (row == this.rowObject.element) {
+          return null;
+        }
+      }
+
       // Check that swapping with this row is allowed.
       if (!this.rowObject.isValidSwap(row)) {
         return null;

I'm using 6.x-2.x-dev (Apr 23), and it looks like the above change is actually implemented in the module's version of tabledrag. But I'm still getting the crazy jumping when I'm trying to drag and drop my views fields, filters, etc. Any suggestions?

What about this one here: #452376: jQuery 1.3.x (Problem replacing modified version of tabledrag.js)

Can confirm I noticed the same bug. I did figure out how to move them for the time being. Which is the following:
- Drag item like you would do normally (yes with the jumping around)
- Drag it till you are sure you can see it and it is at the correct place
- at this moment click twice to let go of the item and it stays in the spot

Its note very convenient, but heck, while developing you'll do anything to keep going :P

Subscribing

subscribing

i was having the problem on the admin block draggable table but NOT on the CCK admin draggabletables with jquery 1.3.2.

i could not figure out why but for now im able to use specific jquery 1.2.6 when dragging tables. the shaking/flickering/missing row problem does not happen with that version of jquery.

Old, but still SO true. Upgraded to jQuery latest (1.4.x) and all went haywire. Downgraded to jQuery 1.2.6 and dragging/dropping works great again. Thanks.

Console is showing this error each time a table row disappears while being dragged:

Node cannot be inserted at the specified point in the hierarchy" code: "3
jquery.js line:12

Update: This bug has reared it's ugly head again, and chrome seems to have a more detailed console than firebug, as this is the error that comes up:

Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3____jquery.js:12 (<--- line numbers)
o.fn.o.after____jquery.js:12
o.fn.o.domManip____jquery.js:12
o.fn.o.after____jquery.js:12
Drupal.tableDrag.row.swap____tabledrag.js:925
Drupal.tableDrag.dragRow____tabledrag.js:403
(anonymous function)____tabledrag.js:94
o.event.handle____jquery.js:19
o.event.add.J____jquery.js:19

Book and Outline designer module with jquery update 1.3.2:

I upgraded to jquery 1.3.2 because I needed to use Jquery UI 1.7 , before updating the admin book page was working well , but now the dragging became annoying and needs 1 more click after releasing the mouse to save the draggable items weight via Ajax. In addition, the firebug console is displaying an error as follow:

uncaught exception: Syntax error, unrecognized expression:

My quick investigation led me to noticing that outline designer module overrides the:
Drupal.tableDrag.prototype.onDrop function as it use it to save the weight via ajax.

Any patches or solutions would be appreciated.
Thanks,

Subscribing

Subscribing.
I'm observing the behavior outlined in #10 using jquery 1.3.2

I'm getting the following error:
TypeError: Result of expression '$(this.element)[directions[d]]' [undefined] is not a function.
This is with Drupal 6.20, CCK 6.x-2.9 and the latest jquery_update code.

FYI I also uninstalled jquery_update and am STILL seeing this problem, so it isn't jquery_update at fault. FYI the only JS that is being loaded is:

<script type="text/javascript" src="/misc/jquery.js?M"></script>
<script type="text/javascript" src="/misc/drupal.js?M"></script>
<script type="text/javascript" src="/misc/tabledrag.js?M"></script>
<script type="text/javascript" src="/sites/all/modules/contrib/cck/js/content.admin.js?M"></script>

FYI that's CCK 6.x-3.x-dev from today and I'm on admin/content/node-type/[content_type]/fields.

Ok, weirder & weirder. After rooting through my site to see what other JS was loading on that page, it turned out that some affiliate code from thefind.com was causing the problem, specifically this file: http://upfront.thefind.com/scripts/main/utils-init-ajaxlib/upfront-badge...
Go figure.

So if you are experiencing this problem you should check to see if any other obscure JS is loading on the page.

Subscribing!

Possible duplicate of #893538: Tabledrag.js and jQuery 1.4.2, where there's a patch on tabledrag.js to work with jQuery 1.4.2.

Found a fix for Drupal 6 and jQuery 1.3.2 - here. It seems to be working, maybe someone else could take a look at it.

Drupal 6 reached EOL (end-of-life) on February 24, 2016.