HTML5之ondragover，ondrop，ondragstart
浏览量：10914
利用HTML5新增的ondragover，ondrop，ondragstart函数做了个的拼图游戏，做好后玩着感觉挺好玩，可是却怎么也拼不回原始图片，最后在别人的提醒下才知道，原来要留有两个空格，下面的拼图的代码。
要设置draggable="true" 的属性后才可以被拖动，可惜ipone里没有鼠标的操作，只能在台式电脑里玩，以后再考虑iphone吧
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.div{width:300px;height:300px;border:1px solid #aaaaaa;float:left;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{ //运行拖拽到此处
{ //运行拖拽到此处
ev.preventDefault();
}
function drag(ev,id)
{
//开始拖动图片
function drag(ev,id)
{
//开始拖动图片
olid=id.replace("drag","");
ev.dataTransfer.setData("Text",ev.target.id);
}
var paixu=2;
var olid=0;
var olid=0;
var newArray=new Array(new Array());
newArray[0]="1,3";
newArray[1]="0,2,4";
newArray[2]="1,5";
newArray[3]="0,4,6";
newArray[4]="1,3,5,7";
newArray[5]="2,4,8";
newArray[6]="3,7,9";
newArray[7]="4,6,8";
newArray[8]="5,7";
newArray[9]="6";
newArray[0]="1,3";
newArray[1]="0,2,4";
newArray[2]="1,5";
newArray[3]="0,4,6";
newArray[4]="1,3,5,7";
newArray[5]="2,4,8";
newArray[6]="3,7,9";
newArray[7]="4,6,8";
newArray[8]="5,7";
newArray[9]="6";
function drop(ev,id)
{//放到此处
if(id==paixu){
if(newArray[paixu].indexOf(olid)!=-1){
ev.preventDefault();
if(newArray[paixu].indexOf(olid)!=-1){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
var oldid="drag"+olid;
document.getElementById(oldid).id="drag"+paixu;
paixu=olid
}}
}
</script>
</head>
<body>
<p>请把 W3School 的图片拖放到矩形中：</p>
<div style="width:1000px;float:left;display:block;">
<div id="0" class="div" ondrop="drop(event,this.id)" ondragover="allowDrop(event)">
<div id="0" class="div" ondrop="drop(event,this.id)" ondragover="allowDrop(event)">
</div>
<div id="1" class="div" ondrop="drop(event,this.id)" ondragover="allowDrop(event)">
</div>
<div id="2" class="div" ondrop="drop(event,this.id)" ondragover="allowDrop(event)"></div>
<div id="3" class="div" ondrop="drop(event,this.id)" ondragover="allowDrop(event)">
</div>
<div id="4" class="div" ondrop="drop(event,this.id)" ondragover="allowDrop(event)">
</div>
<div id="5" class="div" ondrop="drop(event,this.id)" ondragover="allowDrop(event)">
</div>
<div id="6" class="div" ondrop="drop(event,this.id)" ondragover="allowDrop(event)">
</div>
<div id="7" class="div" ondrop="drop(event,this.id)" ondragover="allowDrop(event)">
</div>
<div id="8" class="div" ondrop="drop(event,this.id)" ondragover="allowDrop(event)">
</div>
<div id="9" class="div" ondrop="drop(event,this.id)" ondragover="allowDrop(event)">
</div>
</div>
<script>
window.onload=setdefault();
</div>
<script>
window.onload=setdefault();
function setdefault(){
var rand=Math.random()*9;
var n=parseInt(rand);
paixu=n;
var imgarr=new Array();
imgarr[0]="0";
imgarr[1]="1";
imgarr[2]="2";
imgarr[3]="3";
imgarr[4]="4";
imgarr[5]="5";
imgarr[6]="6";
imgarr[7]="7";
imgarr[8]="8";
for(var i=0;i<10;i++){
if(i!=n){
rand=Math.random()*(10-i)-1;
var rand=Math.random()*9;
var n=parseInt(rand);
paixu=n;
var imgarr=new Array();
imgarr[0]="0";
imgarr[1]="1";
imgarr[2]="2";
imgarr[3]="3";
imgarr[4]="4";
imgarr[5]="5";
imgarr[6]="6";
imgarr[7]="7";
imgarr[8]="8";
for(var i=0;i<10;i++){
if(i!=n){
rand=Math.random()*(10-i)-1;
var img=parseInt(rand);
document.getElementById(i).innerHTML='<img id="drag'+i+'" src="images/'+imgarr[img]+'.gif" draggable="true" ondragstart="drag(event,this.id)" />';
imgarr.splice(img, 1);//移除数组，从几位开始，移除几个
}
}
}
</script>
</body>
}
}
}
</script>
</body>
</html>