Six Degrees of Kevin Bacon Using MooTools 1.2

By  on  

As you can probably tell, I try to mix some fun in with my MooTools madness but I also try to make my examples as practical as possible. Well...this may not be one of those times.

I love movies and useless movie trivia so naturally I'm enamored with the Six Degrees of Kevin Bacon game. If you're unfamiliar with the game, Wikipedia has a great description. To summarize, you need to string together actors/actresses that have appeared in movies together with the last person being Kevin Bacon.

To bring that to the web, I felt that drag and drop would be the best method. I wanted the user to drag an actor's image into a specific drop box and the string of actors would be presented in that fashion. After a lot of work, I made it happen.


.bad			{ background:#fc8976; border-color:#ff3918; }
.clear			{ clear:both; }
#crumb			{ float:right; margin:0 100px 0 0; padding:10px; border-left:1px solid #ccc; background:#eee; }
#dragable-holder	{ margin:20px 0; }
.dragable		{ position:relative; cursor:move; }
#droppable-holder	{  }
.droppable		{ border:2px solid #ccc; width:100px; height:100px; float:left; margin:0 20px 0 0; }
.good			{ background:#76fca8; border-color:#26af5a; }
.hint			{ color:#eee; }
.hint-show		{ color:#000; }
.hint-movie		{ padding:0 0 0 30px; font-style:italic; list-style-type:none; color:#333; }
.no-move		{ cursor:default; }

There's not very much CSS involved -- most of it was simply formatting the position of the crumb. Note that I've added the "move" cursor to elements that I want the user to know that they may drag. In this case, the images.


<!-- flow -->
<ul id="crumb">
	<li class="hint" rel="kevin">Kevin Bacon</li>
	<li class="hint-movie">Mystic River</li>
	<li class="hint" rel="sean">Sean Penn</li>
	<li class="hint-movie">The Thin Red Line</li>
	<li class="hint" rel="jim">Jim Caviezel</li>
	<li class="hint-movie">The Count of Monte Cristo</li>
	<li class="hint" rel="dagmara">Dagmara Dominczyk</li>
	<li class="hint-movie">Running With Scissors</li>
	<li class="hint" rel="joseph">Joseph Fiennes</li>
	<li class="hint-movie">Killing Me Softly</li>
	<li class="hint" rel="heather">Heather Graham</li>

<!-- holders -->
<div id="droppable-holder">
	<div id="holder1" class="droppable" rel="heather"></div>
	<div id="holder2" class="droppable" rel="joseph"></div>
	<div id="holder3" class="droppable" rel="dagmara"></div>
	<div id="holder4" class="droppable" rel="jim"></div>
	<div id="holder5" class="droppable" rel="sean"></div>
	<div id="holder6" class="droppable" rel="kevin"></div>
<div class="clear"></div>

<!-- images -->
<div id="dragable-holder">
	<img src="6degrees/heather.jpg" class="dragable tip" rel="heather" title="Heather Graham" />
	<img src="6degrees/sean.jpg" class="dragable tip" rel="sean" title="Sean Penn" />
	<img src="6degrees/jim.jpg" class="dragable tip" rel="jim" title="Jim Caviezel" />
	<img src="6degrees/joseph.jpg" class="dragable tip" rel="joseph" title="Joseph Fiennes" />
	<img src="6degrees/dagmara.jpg" class="dragable tip" rel="dagmara" title="Dagmara Dominczyk" />
	<img src="6degrees/kevin.jpg" class="dragable tip" rel="kevin" title="Kevin Bacon" />
</div><div class="clear"></div>

Not very much HTML here either. One simple list that servers as the crumb and the two containers which hold the dragables and the droppables. Also, note that the droppable rel attributes matches the same attribute on each dragable and crumb list item. This is very important.

The MooTools JavaScript

//when the dom is ready...
window.addEvent('domready',function() {
	document.ondragstart = function () { return false; }; //IE drag hack
	//for every dragable image...
	$$('.dragable').each(function(drag) {
		//this is where we'll save the initial spot of the image
		var position = drag.getPosition();
		//make it dragable, and set the destination divs
		new Drag.Move(drag, {
			//droppables: $$('.droppable'),
			droppables: '.droppable',
			onComplete: function() {
				if(drag.get('rel') == 'x')
			onEnter: function(el,droppable) {
				droppable.addClass(el.get('rel') == droppable.get('rel') ? 'good' : 'bad');
			onLeave: function(el,droppable) {
				if(droppable.get('rel') != 'x')
			onDrop: function(el, droppable) {
					//if good...
					if(el.get('rel') == droppable.get('rel'))
						//add the good class
						//show right side crumb item
						$$("#crumb li[rel='" + el.get('rel') + "']").addClass('hint-show');
						//set rel as flag later
						el.setStyles({'left':0,'top':0,'position':'relative','margin':0}); //hack -- wtf?
						//no mo!
					//bad drop, go back!
						el.setStyles({'left':0,'top':0,'position':'relative','margin-right':'20px'}); //hack -- wtf?
		//position fix

The JavaScript was the difficult part of this project. I'll do my best to summarize:

  • For every element with the dragable class (the images), we use MooTools to make the element dragable.
  • We add a onComplete option to check to see if the image is already where it should be -- if so, disable any more dragging of this image.
  • For every droppable (or each container), we add a bunch of events:
    • Over: The over event is simple -- we simply add an event to the droppable that changes the background and border colors to indicate whether the user is hovering over the correct box or not.
    • Leave: We remove the bad class in all cases, but only remove the good if aimage isn't already in the correct spot.
    • Drop: If it's a good drop, we add the good class, show the crumb item, inject the image into the droppable, and lock the image in there (remove the drag). If it's a bad drop, we place the image back into the list of images.

Again, this isn't the most practical use of JavaScript drag/drop but it sure is fun!

Special Note

I can't mention this game without also mentioning that Kevin's created a charity called Six Degrees that benefits your favorite charity. If you get a moment, please check out the website.

Track.js Error Reporting

Upcoming Events

Recent Features

  • CSS 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

  • I&#8217;m an Impostor

    This is the hardest thing I've ever had to write, much less admit to myself.  I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life.  All of those feelings were very...

Incredible Demos

  • MooTools Zebra Table Plugin

    I released my first MooTools class over a year ago. It was a really minimalistic approach to zebra tables and a great first class to write. I took some time to update and improve the class. The XHTML You may have as many tables as...

  • MooTools-Like Element Creation in jQuery

    I really dislike jQuery's element creation syntax. It's basically the same as typing out HTML but within a JavaScript string...ugly! Luckily Basil Goldman has created a jQuery plugin that allows you to create elements using MooTools-like syntax. Standard jQuery Element Creation Looks exactly like writing out...


  1. crush

    great work!
    but how can i fix the bug, that the dragables flow over the screen, when they injected back in the dropable-holder?
    it is possible to get some ‘order’ in that area?

  2. crush

    ok, at the end i found out how u can avoid that bad behaviour:
    u have to use

    drag.setStyles({'left':0,'top':0,'position':'relative','margin':0}); //hack -- wtf?

    everytime – also when u want to inject a dragable back to the droppable-area!
    otherwise your dragables suck over the whole screen ;-)

    again thx for the nice work! i added a XMLHttpRequest to valid each move and it works fine!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!