Make Draggable Items Dockable

Posted by Sean on Feb 10, 2009 under Javascript

I've been working on a RTE using Mootools, and I wanted the toolbar to draggable. I always like it when I can drag something to the edge and it will dock itself. So, I extended Drag.Move to allow docking: Drag.Dock. With this class, which requires Drag and Drag.Move from the Mootools More, the draggable elements can now be docked to any side of the window.


Drag.Dock = new Class({
	Extends: Drag.Move,
	options: {
		proximity: 20
	},
	initialize: function(element, options, location) {
		$(element).setStyle('position','fixed');
		this.setOptions(options);
		this.parent(element, this.options);
		this.dock(location || 'top');
	},
	drag: function(event) {
		this.parent(event);
		var windowHeight = window.innerHeight || document.documentElement.clientHeight;
		var windowWidth = window.innerWidth || document.documentElement.clientWidth;
		if(this.element.offsetTop < this.options.proximity) {
			this.dock('top');
		}
		if(this.element.offsetTop + this.element.offsetHeight > windowHeight - this.options.proximity) {
			this.dock('bottom');
		}
		if(this.element.offsetLeft < this.options.proximity) {
			this.dock('left');
		}
		if(this.element.offsetLeft + this.element.offsetWidth > windowWidth - this.options.proximity) {
			this.dock('right');
		}
	},
	dock: function(location) {
		var windowHeight = window.innerHeight || document.documentElement.clientHeight;
		var windowWidth = window.innerWidth || document.documentElement.clientWidth;
		switch(location) {
			case 'top':
				this.element.setStyle('top',0);
				break;
			case 'bottom':
				this.element.setStyle('top',windowHeight - this.element.offsetHeight);
				break;
			case 'left':
				this.element.setStyle('left',0);
				break;
			case 'right':
				this.element.setStyle('left',windowWidth - this.element.offsetWidth)
				break;
			default:
				break;
		}
	}
});

The options for Drag.Dock are of course all that would be applied to Drag.Move , plus proximity , which defaults 20. This is how many pixels away from the screen edge before it tries to dock to the edge.

And the convenience method, similar to makeDraggable :


Element.implement({
	makeDockable: function(options,location) {
		return new Drag.Dock(this,options,location);
	}
});

drag-dock.zip

Next: Job Title: Web Magician Previous: Making Objects in an Array Unique

8 Comments

Rexxars Feb 12, 2009

Don't suppose you have a demo up?
Hugo Feb 13, 2009

Is there a demo and instructions on how to implement? (For those of us new to Mootools)

Thanks! Awesome script.
Sean Feb 15, 2009
I don't have a demo up, I could make one though.

For implementing, it's pretty easy with the Element tie-in:
```
$('myElement').makeDockable();
```
That's it. Or you instantiate a new instance the normal way:
```
var dockedObj = new Drag.Dock($('myElement'));
```
Michael Parenteau Mar 19, 2009

It is always nice to see a demo, regardless of how easy it may be to implement. Not everybody may be familiar with the mootools library or javascript for that matter... so when they investigate a plugin... before they invest a bunch of time working at it... it is nice to see it in action to figure out if they want to invest the time in making it work and/or hacking their way through javascript. That is just my humble opinion :) Just posting the code is good for me... but just thinking useability for different people.
Sean Mar 19, 2009

I should point out that I've added a demo to the zip download. Along with the source, it comes with example code and a web-page showing off how it works.

I've also put up a demo page, so you can see it without downloading anything.
Tetsuo Mar 20, 2009

I agree, would be nice to see a demo of this.
Michael Parenteau Apr 10, 2009

This is really great!!! Thanks for the demo. I think I will play around with this. I am currently working on an application that could really use some of this behavior!

Alex Jun 29, 2009

Here's something draft I wrote that simulates docking. It can be dragged in the whole document. I don't create the elements on fly, something I suggest though. I also suggest you to set the z-index of each div up :)

//Here starts the code:

var winsize= document.getSize();
var thewidth= winsize.x;

function getheight(){
	var e=document.documentElement.scrollHeight;
	var d=document.documentElement.offsetHeight;
	if(e < d){
		return window.height()+"px"
	}else{
		return e+"px"
	}
}

//#dhtml{position:absolute; top:0px; margin:0;padding:0; z-index:-1;}
$('dhtml').set({
	'styles':{
		'width':thewidth,
		'height':getheight()
	}
});

//#mydiv{position:absolute; height:100px; width:100px; top:0; border:1px solid #000; z-index:2;}
$('mydiv').makeDraggable({
	container:'dhtml'
});

//Here the code ends, don't forget to put all this in the domready event :)

McArthur GFX