mootools_使用MooTools 1.2的六度Kevin Bacon

mootools

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.

您可能会说，我尝试将一些乐趣与MooTools的疯狂结合在一起，但同时我也尝试使示例尽可能实用。 好吧...这可能不是其中一次。

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.

我喜欢电影和无用的电影琐事，所以自然而然地迷上了凯文·培根的六度游戏。 如果您不熟悉该游戏，那么Wikipedia会有很好的描述 。 总而言之，您需要将电影中出现过的演员/女演员与最后一位是凯文·培根一起编排在一起。

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.

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

View Demo 观看演示

CSS (The 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; }

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.

涉及CSS并不多-大部分只是格式化碎屑的位置。 请注意，我已将“移动”光标添加到我希望用户知道它们可能会拖动的元素上。 在这种情况下，图像。

XHTML (The XHTML)

<!-- 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>
</ul>

<!-- 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>
<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.

这里也不是很多HTML。 一个简单的列表，用作面包屑和两个容器，分别容纳可拖动对象和可放置对象。 另外，请注意，droppable rel属性与每个可拖动和面包屑列表项上的相同属性匹配。 这个非常重要。

MooTools JavaScript (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')
				{
					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'
		});
		
	});
});

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

JavaScript是该项目的难点。 我会尽力总结一下：

• For every element with the dragable class (the images), we use MooTools to make the element dragable.
  对于具有可拖动类的每个元素(图像)，我们使用MooTools使该元素可拖动。

• 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.

  我们添加了一个onComplete选项，以检查图像是否已经在应有的位置–如果是，请禁用对该图像的任何其他拖动。

• For every droppable (or each container), we add a bunch of events:

  对于每个droppable(或每个容器)，我们添加一堆事件：

  • 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.
    Over ：over事件很简单-我们只需将一个事件添加到droppable中即可更改背景和边框颜色，以指示用户是否将鼠标悬停在正确的框上。
  • Leave: We remove the bad class in all cases, but only remove the good if aimage isn't already in the correct spot.
    离开 ：我们会在所有情况下删除不良类别，但仅在aimage不在正确位置时才删除不良类别。
  • 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.
    放置 ：如果放置良好，我们将添加良好的类，显示碎屑项，将图像注入到可放置对象中，然后将图像锁定在其中(删除拖动)。 如果跌落不好，我们将图像放回图像列表中。

View Demo 观看演示

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

再次强调，这不是JavaScript拖放的最实际用途，但确实很有趣！

特别说明 (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.

我不能不提到这款游戏，还必须提到凯文(Kevin)创建了一个名为“六度”(Six Degrees)的慈善机构，该慈善机构使您最喜欢的慈善机构受益。 如果有时间， 请访问网站 。

翻译自: https://davidwalsh.name/six-degrees-of-kevin-bacon

mootools