html5 drag this,HTML5之ondragover，ondrop，ondragstart

利用HTML5新增的ondragover，ondrop，ondragstart函数做了个的拼图游戏，做好后玩着感觉挺好玩，可是却怎么也拼不回原始图片，最后在别人的提醒下才知道，原来要留有两个空格，下面的拼图的代码。

要设置draggable="true"  的属性后才可以被拖动，可惜ipone里没有鼠标的操作，只能在台式电脑里玩，以后再考虑iphone吧

.div{width:300px;height:300px;border:1px solid #aaaaaa;float:left;}

function allowDrop(ev)

{ //运行拖拽到此处

ev.preventDefault();

}

function drag(ev,id)

{

//开始拖动图片

olid=id.replace("drag","");

ev.dataTransfer.setData("Text",ev.target.id);

}

var paixu=2;

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";

function drop(ev,id)

{//放到此处

if(id==paixu){

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

}}

}

请把 W3School 的图片拖放到矩形中：

window.οnlοad=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 img=parseInt(rand);

document.getElementById(i).innerHTML='';

imgarr.splice(img, 1);//移除数组，从几位开始，移除几个

}

}

}