Developer Pages

Scriptaculous Draggable In a Div with “overflow:auto”

How many times does this happen to you? You have a Scriptaculous Draggable object and it is inside a <div> that has a style of “overflow:auto;”. You start dragging that Draggable around only to find that when you leave the bounds of it’s containing <div> the element disappears! What is a web developer to do?!

I had this very problem and started to tackle it myself by adding some code to the onStart and onEnd callbacks of my Draggable objects to move the Draggable to be a child of document.body temporarily while dragging. This was effective unless the the original div scrolled. There were some other issues as well, so I started searching around for a better approach. I found some discussion of it here:
http://dev.rubyonrails.org/ticket/5771

I then found a solution here:
http://groups.google.com/group/prototype-scriptaculous/browse_thread/thread/b614e856a9aa9d05/b89629e07d1a2f8c?#b89629e07d1a2f8c

The code below is the solution that I found as presented by Google Groups user Christophe Boulain:

function getDragElement(element) {
	var el = element.cloneNode(true);
	el.id = 'sub'+element.id;
	el.style.position = 'relative';
	document.body.appendChild(el);
	return el;
}

var SubsDraggable = Class.create(Draggable, {
	initialize:function($super, element) {
		var options = arguments[2] || {};
		$super(element,options);
		if( typeof(this.options.dragelement) == 'undefined' )
			this.options.dragelement = false;
	},
	initDrag:function(event) {
		if(!Object.isUndefined(Draggable._dragging[this.element]) && Draggable._dragging[this.element])
			return;
		if(Event.isLeftClick(event)) {
			// abort on form elements, fixes a Firefox issue
			var src = Event.element(event);

			if((tag_name = src.tagName.toUpperCase()) && (
				tag_name=='INPUT' ||
				tag_name=='SELECT' ||
				tag_name=='OPTION' ||
				tag_name=='BUTTON' ||
				tag_name=='TEXTAREA')
			)
				return;

			var pointer = [Event.pointerX(event), Event.pointerY(event)];

			// HERE are my modifications to calculate the new clone position. I'm not sure if there is an easier method, but this one seems to work.
			var pos = this.element.cumulativeOffset();
			var scroll = this.element.cumulativeScrollOffset();
			var vpscroll = document.viewport.getScrollOffsets();
			this.offset = [0,1].map( function(i) {
				return (pointer[i] - pos[i] + scroll[i] - vpscroll[i])
			});

			Draggables.activate(this);
			Event.stop(event);
		}
	},
	startDrag: function($super, event) {
		if( this.options.dragelement ){
			this._originalElement = this.element;
			this.element = this.options.dragelement(this.element);
			Position.absolutize(this.element);
			Position.clone(this._originalElement, this.element);
		}
			$super(event);
	},
	finishDrag: function($super, event, success) {
		$super(event, success);

		if(this.options.dragelement){
			Element.remove(this.element);
			this.element = this._originalElement;
			this._originalElement = null;
		}
	}
});

To use it, initialize your Draggable like this:

new SubsDraggable('elementid', { dragelement: getDragElement, ...});

CodeIgniter’s Var Cache

I wrote a library for CodeIgniter called “Var_cache”. It a simple solution for quickly storing and retrieving a variable that does not need to regularly calculated (a typical example being the result of a COUNT(*) query). It is available here:
http://codeigniter.com/wiki/Var_Cache/