引用：http://www.douban.com/note/159200656/
研究方向 jquery html5 css3
<!DOCTYPE html>
<head>
<meta charset=UTF-8>
<title>豆瓣</title>
<style type="text/css">
body{line-height:1;960px;margin:0px auto;font-family:Arial, Helvetica, sans-serif;background-color:#660000;}
ul,ol,dl { list-style-type:none; }
table { border-collapse:collapse; border-spacing:0; }
em { font-style:normal; }
img { border:0; }
.clear { clear:both; overflow:hidden; font-size:0; height:0; line-height:0; }
.hidden { display:none; }
header{border:solid 2px #ccc;margin:10px;text-align:center;960px;height:100px;padding:10px;}
header h1{font-size:20px;}
fieldset{margin:10px 10px;float:right;285px;height:240px;}
.cls { 100px; height:85px; float:left;z-index:1;}
article{border:2px #000 solid;padding:10px;margin:10px;960px;height:320px;clear:both;}
section{border:5px #000 solid;position:absolute;margin:10px;line-height:0px;600px;height:255px;}
.section2{border:5px #000 solid;position:relative;margin:10px;line-height:0px;600px;height:255px;margin:10px 70px;}
.tijiao{margin:0px 150px 50px 100px;}
.a{float:right;border-1px 0; border-color:#bbb; border-style:solid;}
.b{height:22px; border-0 1px; border-color:#bbb; border-style:solid; margin:0 -1px; background:#e3e3e3; position:relative; float:right;}
.c{line-height:10px; color:#; background:#f9f9f9; border-bottom:2px solid #eeeeee;}
.d{padding:0 8px; line-height:22px;font-size:16px; color:#000000; clear:both; margin-top:-12px; cursor:pointer;}
button,.btn {border:#666 1px solid;padding:2px;60px;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
figure{border:2px #000 solid;padding:10px;margin:10px;960px;height:299px;clear:both;}
</style>
</head>
<body>
<header>
<h1>玩拼图！赢大奖！</h1>
</header>
<div style="display:none">
<audio id="sourcevid" autoplay="true" loop>
<source src="BigBuckBunny_640x360.mp4" type="audio/mp4"/>
<source src="BigBuckBunny_640x360.ogv" type="audio/ogg"/>
</audio>
</div>
<article>
<section>
<a href="" title="Contra dolor" rel="external"><img src="p1.jpg" alt="" /></a>
</section>
<fieldset>
<legend>游戏规则</legend>
<p>
1、玩家需要按左边给出的样品图片，拖动右下方的图片进行拼图<br/>
2、在限定时间内将拼图完成，则能观看电影，赢大奖<br/>
</p>
</fieldset>
</article>
<article>
<div class="section2">
<div class="cls" id="2"><img src="2.jpg" /></div>
<div class="cls" id="3"><img src="3.jpg" /></div>
<div class="cls" id="1"><img src="1.jpg" /></div>
<div class="cls" id="5"><img src="5.jpg" /></div>
<div class="cls" id="7"><img src="7.jpg" /></div>
<div class="cls" id="9"><img src="9.jpg" /></div>
<div class="cls" id="10"><img src="10.jpg" /></div>
<div class="cls" id="16"><img src="16.jpg" /></div>
<div class="cls" id="13"><img src="13.jpg" /></div>
<div class="cls" id="11"><img src="11.jpg" /></div>
<div class="cls" id="12"><img src="12.jpg" /></div>
<div class="cls" id="14"><img src="14.jpg" /></div>
<div class="cls" id="15"><img src="15.jpg" /></div>
<div class="cls" id="17"><img src="17.jpg" /></div>
<div class="cls" id="18"><img src="18.jpg" /></div>
<div class="cls" id="4"><img src="4.jpg" /></div>
<div class="cls" id="6"><img src="6.jpg" /></div>
<div class="cls" id="8"><img src="8.jpg" /></div>
</div>
<div class="tijiao">
<div class="a" onClick="fn_check()">
<div class="b">
<div class="c"> </div>
<div class="d">提交</div>
</div>
</div>
</div>
<input id="btnSubmit" type="button" value="提交" onclick="fn_check()" class="btn" />
</article>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script>
var $DragDom;
var $ReplaceDom;//定义两个全局变量 $表示全局变量
$(".cls").each(function(i, obj)
{
$(this).attr('draggable', 'true');//定义可拖动
$(this).bind("dragstart", function(e)//绑定开始时间
{
$DragDom = $(this);// 读取携带的参数到变量中去
return true;
});
$(this).bind('dragover', function(ev) //绑定元素在目标元素中移动事件
{
ev.stopPropagation();
ev.preventDefault();//把默认的事件去掉
return false;
});
$(this).bind("drop", function(e)//绑定元素落在目标元素中事件
{
$ReplaceDom = $(this);读取落在目标元素的参数到变量中去
fn_replace(); //replace
fn_check(); //
return false;
});
});
function fn_replace()
{
var drag_url = $DragDom.find("img:first").attr("src");//找到被拖元素的img的src
var drag_id = $DragDom.attr("id");// 找到被拖元素第一个img的id
var replace_url = $ReplaceDom.find("img:first").attr("src");//找到目标元素的img的src
var replace_id = $ReplaceDom.attr("id");// 找到目标元素的img的src
$ReplaceDom.find("img:first").attr("src", drag_url);//交换url
$ReplaceDom.attr("id", drag_id);//交换id
$DragDom.find("img:first").attr("src", replace_url);//交换url
$DragDom.attr("id", replace_id);//交换url
};
function fn_check()
{
var sort = true;//默认是排序的
var div = [];//读取数组，读取每张图片到数组中去
$(".cls").each(function(i, obj)
{
div.push($(obj));
});
for(var i=0; i<div.length; i++)//循环遍历
{
if(i + 1 != div[i].attr("id"))//因为id是1，i从0开始。。。
{
sort = false;
break;
};
}
if(sort == true)
{
alert("对了");
}
else
{
alert("错了");
}
};
</script>
</body>
</html>