//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>the final project</title>
<link rel="stylesheet" href="css/finalproject.css" />
<script src="js/finalproject.js" ></script>
<style>
*{
padding:0px;
margin:0px;
}
.bkgimg
{
background-image: url("img/b.jpg");
background-repeat: repeat;
}
</style>
</head>
<body onload="chk()" class="bkgimg">
<center>
</br>
<!--角色配对小游戏start-->
<div id="game">
<div id="timelinesT" style="width:100%;">
<span id="timelinest">盗墓笔记小游戏</span>
<span id="gameintro">
下面将给出与书中人物有关昵称与特征的描述
请将以下书中人物拖拽到与其对应的描述中
</span>
</div>
<div id="obj" ondragenter="prevent()" ondragover="prevent()" ondrop="getObj(this)">
<img src="img/wuxie.JPG" id="Wu" draggable="true" ondragstart="startDrag(this)" value="1">
<img src="img/zhangqiling.JPG" id="men" draggable="true" ondragstart="startDrag(this)">
<img src="img/xia.JPG" id="Xia" draggable="true" ondragstart="startDrag(this)">
<img src="img/pangzi.JPG" id="Pang" draggable="true" ondragstart="startDrag(this)">
<img src="img/huaye.JPG" id="Hua" draggable="true" ondragstart="startDrag(this)">
<img src="img/sanshu.JPG" id="San" draggable="true" ondragstart="startDrag(this)">
</div>
<!--承载区-->
<div id="match">
<div id="M1" class="M" ondragenter="prevent()" ondragover="prevent()" ondrop="match1(this)"></div>
<div id="M2" class="M" ondragenter="prevent()" ondragover="prevent()" ondrop="match2(this)"></div>
<div id="M3" class="M" ondragenter="prevent()" ondragover="prevent()" ondrop="match3(this)"></div>
</div>
<div id="match">
<div id="M4" class="M"></div>
<div id="M5" class="M"></div>
<div id="M6" class="M"></div>
</div>
</div>
</div>
<!--角色配对小游戏end-->
</center>
</body>
</html>
//.js
var myimg;
function startDrag(that)
{
myimg=that;
console.log(myimg);
}
function prevent()
{
e=window.event;
e.preventDefault();
}
function getObj(that)
{
var Objimg=myimg.cloneNode();
that.appendChild(Objimg);
}
function Deleteimg(that)
{
var Obj=myimg.parentNode;
Obj.removeChild(myimg);
}
function match1(that)
{
}
function match2(that)
{
myimg=that;
console.log(myimg);
var ID=window.document.getElementsByTagName("img")[0];
alert(ID);
}
//.css
#obj
{
width:100%;
height:746px;
border:1px solid #CCCCCC;
}
#match{
border:1px solid whitesmoke;
width:100%;
height:370px;
}
.M{
width:280px;
height:370px;
border:1px solid whitesmoke;
}
#M1,#M4,#D1,#D4
{
float:left;
}
#M2,#M5,#D2,#D5
{
float:left;
margin-left: 60px;
}
#M3,#M6,#D3,#D6
{
float:right;
}
