原生javascript制作拼图游戏

实现方法

 

//1、让所有的li（在ul里）可以拖拽

//2、交换li的位置  计算背景图位置

//1、让所有的li（在ul里）可以拖拽
//根据鼠标的位置，计算目标li的序号

//根据行号和列号计算下标
//行号*3+列号
//2、归位

此处没有背景图  请自行添加 css样式

这个是这连个js连接的代码

 

//csstools
//功能：获取某个DOM元素的样式属性的兼容性写法
//参数：dom元素，样式属性名
//返回值：样式属性的值

function getStyle(domObj,attr){
	if(domObj.currentStyle){//domObj.currentStyle如果能够正确获取到，那就真
		return domObj.currentStyle[attr];//当对象的属性名是变量时，用方括号而不是点。
	}else{
		return window.getComputedStyle(domObj)[attr];
	}	
}

//eventTools

//功能：阻止浏览器默认行为的封装
//参数：事件对象
//返回值：无

function preventDefault1809(evt) {
	if(evt.returnValue){
		evt.returnValue = false;
	}else{
		evt.preventDefault();
	}
}

//功能：绑定事件
//参数：
	//事件源
	//事件类型名，不带on
	//事件处理函数,
	//是否冒泡
//返回值：无

function addEvent1809(domObj,eventType,func,isBubble){
	if(domObj.addEventListener){
		domObj.addEventListener(eventType,func,isBubble);
	}else if(domObj.attachEvent){
		domObj.attachEvent('on'+eventType,func);
	}else{
		domObj['on'+eventType] = func;
	}
}

//当对象的属性是变量时，不能用点，只能用方括号
/*
var obj = {
	id:'007'
}
obj.id;
var temp = "id";
obj[temp]
*/

js部分