Wrong column is dragged if table is in horizontally scrolling panel

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Put table in a horizontally scrolling panel (overflow-x:scroll;)
2. Scroll to the right
3. Drag a column

What is the expected output? What do you see instead?
Expect the column under the mouse to be selected for dragging. Instead the
column that had that screen position before scrolling is selected.

What version of the product are you using? In what browser?
Dragtablev1.0 
on Mac FF3.6
on Mac Safari 4.0.4

HTML to reproduce is attached. Assumes dragtable library is in same location.

Original issue reported on code.google.com by damianha...@gmail.com on 10 Feb 2010 at 9:00

Attachments:

• draggableissue.html

[GoogleCodeExporter]

I think I have a fix for this issue. Who do I contact about integrating the fix 
into dragtable so others can use it? 

I'm new to javascript work, so my solution may not be the most efficient, but 
it does work.

Original comment by mike.kis...@gmail.com on 20 Aug 2010 at 6:16

[GoogleCodeExporter]

I also had this problem.  Style for my table, if it helps:

 <div style="overflow-x:auto">
    <table class="draggable">

Original comment by tfwri...@gmail.com on 2 Nov 2010 at 7:28

[GoogleCodeExporter]

I am also facing this problem...has anyone found any solution for this ?

Original comment by ankurpr...@gmail.com on 26 Feb 2011 at 5:42

[GoogleCodeExporter]

Hey Mike Kis___, I have the same need.  Can you please email me your changes to 
chesher82 dot gmail?  Thanks! 

Original comment by cheshe...@gmail.com on 13 Jun 2011 at 11:28

[GoogleCodeExporter]

I actually sorted out a possible solution to this for a client who hired me to 
fix this problem.

I edited the eventPosition function (at line 151, I believe) and changed the 
ending from:
return {x: event.pageX, y: event.pageY};
to:
x = document.getElementById('CompareContainer').scrollLeft + event.pageX;
return {x: x, y:event.pageY};

Where #CompareContainer is the ID of the scrolling div which has the draggable 
table within it. Similarly, I add 
"document.getElementById('CompareContainer').scrollLeft + " to the IE bit in 
the same function.

Let me know if that helps and/or if anyone wants more clarity. I'm sure there's 
a more elegant way to do this so that it detects if it's in a scrolling 
container and then pinpoints that scrollLeft value, but I was in a rush, so...

Original comment by puckal...@gmail.com on 2 Apr 2012 at 7:02

[GoogleCodeExporter]

solution added above is incomplete. just a single line missing...
below is the complete solution for same.
on line 151: replace
 return { x: event.pageX, y: event.pageY }; with
 x=$(".tblWrapper").scrollLeft() + event.pageX; //modified for the horizontal scroll
    return { x: x, y: event.pageY };
and also line 293
style.left = (dragObj.elStartLeft + pos.x - dragObj.cursorStartX) + "px"; 
needs to be replaced with:
style.left = (dragObj.elStartLeft + event.pageX - dragObj.cursorStartX) + "px";

This will work perfect for horizontal scroll..

Original comment by anubha17...@gmail.com on 8 Aug 2013 at 8:06

[GoogleCodeExporter]

I had a similar issue but did something different.

All I did was add these lines right before the "return { x: ex, y: ey };" of 
the absolutePosition method:

ex -= document.getElementById('container_id').scrollLeft;

Original comment by dea...@gmail.com on 12 Aug 2014 at 3:12