Dragging an element outside a overflow:auto container

interestingly this doesn't happen in IE6(!), but the draggable element does resize itself smaller whilst dragging.

if you set ghosting to true, this no longer happens...

however, if you scroll down a ways in the div (with ghosting true) and then try to drag, the new element that is created is created where the original would have fallen if scroll top was 0. for example, if the scrollTop of the div is 100 and the element you being dragged is at the top of the visible area of the div, then the new draggable element is created 100px below the cursor instead of at the top of the div like it should be.

Even when I set ghosting to true, this problem still occur. Am I missing something?

This is what I have in css

#fakeiFrame{
        width: 241px;
	height: 320px;
	overflow-x:hidden;overflow-y:scroll;
        border:1px solid #CCC;
}

This is what I have in script

<script type="text/javascript">new Draggable('item',{revert:true,ghosting:true})</script>"

Yes, IE6 works fine. The problem only occur in FF

Take a look at this site http://threebit.net/mail-archive/rails-spinoffs/msg00262.html Someone modified the dragdrop.js a little. When I try to use it, it works (kind of) but the drag is not very smooth.

This is currently not supported because you'd have to attach the dragged node to a page-global context (that is, attach it to the BODY element). Note that this isn't trivial, as things like LI elements expect to be children of UL or OL elements, CSS issues (style rules are completely different), and so on and so forth.

Of course a patch for this would be very welcome.

i had the same problem i changed in dragndrop code to resolve this problem what i did is (while ghosting) i appended this.element to document.body this made the draggable object a child of the body while dragging and thus does not overflow the containing div

startDrag:
...
    if(this.options.ghosting) {
      this._clone = this.element.cloneNode(true);
      Position.absolutize(this.element);
      this.element.parentNode.insertBefore(this._clone, this.element);
      
      document.body.appendChild(this.element)
    }

finishDrag:
....
    if(this.options.ghosting) {
      Position.relativize(this.element);
      this._clone.swapNode(this.element)
      Element.remove(this._clone);
      this._clone = null;
    }

these are my changed lines and of course to have the swapNode available for FF, i included ir_methods.js // Written by Terry Friesen, tfriesen@mts.net // http://www.mts.net/~tfriesen/dhtml/

cheers

How do I fix the clone's position?

I tried to use your fix, but there's a problem. The clone created by ghosting is in absolute position. Since my draggables are inside an overflow, there are offset when clones are created.

For example, say I've an overflow with an height of 200px. Suppose my draggable is in this overflow with an absolute position of (X=100, Y=500). Now, when I scroll down the overflow and try to drag my draggable, the clone created is not at the position of the "after scrolling" draggable. Instead, the clone is created in absolute position of 500px. As you can see, there is a big offset between the clone and the original draggable element.

:)

in initDrag, replace the lines:

var pointer = [Event.pointerX(event), Event.pointerY(event)]; var pos = Position.cumulativeOffset(this.element);

with the lines

var pointer = [event.layerX,event.layerY]; var valueT = 0, valueL = 0; var element = event.originalTarget; do {

valueT += element.offsetTop 0;

valueL += element.offsetLeft 0; element = element.offsetParent;

} while (element != this.element); var pos = [valueL,valueT]; this.offset = [0,1].map( function(i) { return (pointer[i] + pos[i]) });

Replying to woranl@gmail.com:

How do I fix the clone's position? I tried to use your fix, but there's a problem. The clone created by ghosting is in absolute position. Since my draggables are inside an overflow, there are offset when clones are created. For example, say I've an overflow with an height of 200px. Suppose my draggable is in this overflow with an absolute position of (X=100, Y=500). Now, when I scroll down the overflow and try to drag my draggable, the clone created is not at the position of the "after scrolling" draggable. Instead, the clone is created in absolute position of 500px. As you can see, there is a big offset between the clone and the original draggable element. :)

Come on! All these ridiculous hacks... Add this, change that... How about when a new version is released? How do you track all of those things?

I've tried all of these hacks and none of them work! IE doesn't do this or FF doesn't do that. Please, if this is solvable in the core, please someone do so - I haven't the skills or familiarity to do so. THis is a kick-ass library, but if it doesn't funciton as it should...

Ticket being closed now. See discussion in ticket 5771, for a patch.

http://dev.rubyonrails.org/ticket/5771