when I define a draggable in a div that has a style overflow:scroll or overflow:auto, I can't drag the draggable out of this div. The scrollbars in the div get longer according to the position of the draggable, but there is no way to get it out.
Why is this needed:
I have a long list of draggables that are in a list scrollable with the overflo:auto scroll area. I want to drag them to a droppable shopping cart like div.
I rewrote the dragdrop.js so that it runs when ghosting and revert are activated, but it gives errors when ghosting is disabled.
It works like this: When a draggable is dragged, it gets appended to document.body and its position is set so that it does not appear to move. On drag stop, it gets reattached to its former position.
Here is a diff for dragdrop.js ( i think it's for version 1.5)
192c192
< /*reverteffect: function(element, top_offset, left_offset) {
---
reverteffect: function(element, top_offset, left_offset) {
195,222c195
< },*/
< reverteffect: (function(element, top_offset, left_offset) {
< var dur = Math.sqrt(Math.abs(top_offset2)+Math.abs(left_offset2))*0.02;
< new Effect.MoveBy(element, -top_offset, -left_offset,
< {duration:dur,
< afterFinish:(function(){
<
< if(this.onFront) {
< this.onFront=false;
<
< this._clone.parentNode.insertBefore(this.element,this._clone);
< this.element.style.left=this._clone.offsetLeft+"px";
< this.element.style.top=(this._clone.offsetTop-this._clone.parentNode.scrollTop)+"px";
<
< Position.relativize(this.element);
<
< if(this.options.ghosting) {
<
< Element.remove(this._clone);
< this._clone = null;
< }
<
< }
<
< }).bind(this)
< });
< }).bind(this),
<
---
},
262,267c235
< if(Event.isLeftClick(event)) {
<
< if(this.onFront) {
< return;
< }
<
---
if(Event.isLeftClick(event)) {
298c266
< if(this.options.ghosting && !this.onFront) {
---
if(this.options.ghosting) {
304,328d271
< if(this.options.bringtofront && !this.onFront) {
< this.onFront=true;
< pos=Position.page(this.element);
< /*var d = this.currentDelta();
< if(revert && this.options.reverteffect) {
< this.options.reverteffect(this.element,
< d[1]-this.delta[1], d[0]-this.delta[0]);
< */
< this.delta=pos;
<
< //this.originalLeft = pos[0];
< //this.originalTop = pos[1];
< this.originalZ=1000;
< document.body.appendChild(this.element);
<
< var pointer = [Event.pointerX(event), Event.pointerY(event)];
< this.offset[0]=(pointer[0] - pos[0]);
< this.offset[1]=(pointer[1] - pos[1]);
<
< this.element.style.left=pos[0]+"px";
< this.element.style.top=pos[1]+"px";
<
<
< }
<
349c292
< if(this.options.ghosting && !this.options.bringtofront) {
---
if(this.options.ghosting) {
