Kevin Bacon 的六度使用 MooTools 1.2

您可能会说，我尝试将一些乐趣与我的 MooTools 疯狂结合起来，但我也尝试使我的示例尽可能实用。好吧……这可能不是那个时代之一。

我喜欢电影和无用的电影琐事，所以我很自然地迷上了凯文培根的六度游戏。如果您不熟悉该游戏，维基百科有很好的描述。总而言之，您需要将出现在电影中的演员/女演员串在一起，最后一个人是凯文·培根。

要将其带到网络上，我认为拖放是最好的方法。我希望用户将演员的图像拖到特定的下拉框中，然后一串演员将以这种方式呈现。经过大量工作，我实现了它。

CSS

.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; }

涉及的 CSS 并不多——大部分只是简单地格式化 crumb 的位置。请注意，我已将“移动”光标添加到我希望用户知道他们可以拖动的元素。在这种情况下，图像。

XHTML

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

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

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

这里也没有太多的 HTML。一个简单的列表，作为 crumb 和两个容纳 dragables 和 droppables 的容器。另请注意，可放置的 rel 属性与每个可拖动和碎屑列表项上的相同属性相匹配。这非常重要。

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')
				{
					drag.addClass('no-move');
					this.detach();
				}
			},
			onEnter: function(el,droppable) {
				//colors!
				droppable.addClass(el.get('rel') == droppable.get('rel') ? 'good' : 'bad');
			},
			onLeave: function(el,droppable) {
				droppable.removeClass('bad');
				if(droppable.get('rel') != 'x')
				{
					droppable.removeClass('good')
				}
			},
			onDrop: function(el, droppable) {
					
				if(droppable)
				{
					//if good...
					if(el.get('rel') == droppable.get('rel'))
					{
						//add the good class
						droppable.addClass('good');
						
						//show right side crumb item
						$$("#crumb li[rel='" + el.get('rel') + "']").addClass('hint-show');
						
						//set rel as flag later
						droppable.set('rel','x');
						
						//reposition
						el.inject(droppable);
						el.setStyles({'left':0,'top':0,'position':'relative','margin':0}); //hack -- wtf?
						
						//no mo!
						el.set('rel','x');
					}
					//bad drop, go back!
					else
					{
						droppable.removeClass('bad');
						el.setStyles({'left':0,'top':0,'position':'relative','margin-right':'20px'}); //hack -- wtf?
						el.inject($('dragable-holder'));
					}
				}
				else
				{
					  el.inject($('dragable-holder'));
				}
			 }
		});
		
		//position fix
		drag.setStyles({
			'top':0,
			'left':0,
			'margin-right':'20px'
		});
		
	});
});

JavaScript 是这个项目的难点。我会尽力总结：

• 对于每个具有可拖动类（图像）的元素，我们使用 MooTools 使元素可拖动。
• 我们添加一个 onComplete 选项来检查以查看如果图像已经在它应该在的位置 – 如果是这样，请禁止再拖动此图像。
• 对于每个可放置的（或每个容器），我们添加一堆事件：
  • Over：over 事件很简单——我们只需向 droppable 添加一个事件来更改背景和边框颜色以指示用户是否将鼠标悬停在正确的框上.
  • Leave：我们在所有情况下都删除了bad类，但只有在图像不在正确位置时才删除good。
  • Drop：如果是好的 drop，我们添加 good 类，显示 crumb item，将图像注入 droppable，并锁定图像在那里（删除拖动）。如果掉落不当，我们会将图像放回图像列表中。

同样，这不是 JavaScript 拖放操作的最实际用途，但确实很有趣！

特别说明

我不能不提到这个游戏，也提到凯文创建了一个名为“六度”的慈善机构，该慈善机构使您最喜欢的慈善机构受益。如果您有时间，请查看该网站。