javascript_九宫格拖拽，网页上的九宫格怎么做？
<!DOCTYPE html>
<html><head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
list-style: none
}
#ul1{
position:relative;
left:200px;
top:100px;
width:600px;
height:450px;
border:1px solid black;
}
#inbox{
position:relative;
left:200px;
top:100px;
}
</style>
</head>
<body>
<ul id="ul1">
</ul>
<div id="inbox">
亲：请输入行和列：
<input id="rowsId" type="text" />行，
<input id="colsId" type="text" />列
<input id="btn01" type="button" value="重新产生" />
</div>
</body>
</html>
<script type="text/javascript" src="js/eventTools.js"></script>
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript">
//容器的定位:
var boxLeft;
var boxTop;
//1、容器的尺寸（宽高）
var boxWidth ;
var boxHeight;
//2、行数和列数
var rows=3;
var cols=5;
//3、每个单元的宽高
var width;
var height;
//目标序号
var targetOrd = -1;
//
//初始化数据
function initData(){
boxLeft=200;
boxTop=100;
//1、容器的尺寸（宽高）
boxWidth = 600;
boxHeight = 450;
//2、行数和列数
//rows = 3;
//cols = 5;
//3、每个单元的宽高
unitWidth=boxWidth/cols; //120
unitHeight=boxHeight/rows;//150
//目标序号
targetOrd = -1;
}
//初始化界面
function initUI(){
$("#ul1").innerHTML = "";
//把每个li进行定位，并指定图片；
for(var i=0;i<rows*cols;i++){
//1、创建li
var liDom = $create("li");
$("#ul1").appendChild(liDom);
liDom.style.position="absolute";
liDom.style.border="1px solid black";
var left = (i%cols)*unitWidth;
var top = parseInt(i/cols)*unitHeight;
liDom.style.boxSizing = "border-box";
liDom.style.left = left+"px";
liDom.style.top = top+"px";
liDom.style.width = unitWidth+"px";
liDom.style.height = unitHeight+"px";
liDom.style.backgroundImage = "url(images/1.jpg)";
liDom.style.backgroundSize =boxWidth+"px "+boxHeight+"px";
liDom.style.backgroundPosition = -1*(i%cols)*unitWidth+"px "+ (-1*parseInt(i/cols)*unitHeight)+"px";
}
}
//让每张图片都能拖拽
//当前拖拽的图片(li)序号
var currOrd = -1;
var offsetX ;
var offsetY ;
document.body.onmousemove = function(event){
var evt = event || window.event;
if(currOrd>-1){//有图片被按下。currOrd记录着图片的序号
//跟着走
var x= (evt.pageX-boxLeft-offsetX);
var y= (evt.pageY-boxTop-offsetY);
//拖拽的图片不能越界
if(x<0){
x=0;
}else if(x>boxWidth-unitWidth){
x = boxWidth-unitWidth;
}
if(y<0){
y=0;
}else if(y>boxHeight-unitHeight){
y=boxHeight-unitHeight;
}
//根据鼠标的位置得到进入了哪个区域
targetOrd = getPositon({x:evt.pageX-boxLeft,y:evt.pageY-boxTop});
console.log(targetOrd);
$("#ul1").children[currOrd].style.left=x+"px";
$("#ul1").children[currOrd].style.top=y+"px";
}
}
function lisBindOnmouseDown(){
var lis = $("#ul1").children;
for(var i=0;i<lis.length;i++){
lis[i].index = i;
lis[i].onmousedown = function(event){
var evt = event || window.event;
offsetX = evt.offsetX;
offsetY = evt.offsetY;
console.log(offsetX+","+offsetY);
//鼠标按下，需要记录当前被按下的图片的序号。
currOrd = this.index;
//让当前li的z-index最大；
this.style.zIndex = 999;
}
}
}
document.body.onmouseup = function(){
//没有图片被按下
if(currOrd==-1){
return;
}
$("#ul1").children[currOrd].style.zIndex = 1;
//要么交换，要么归位。
if(currOrd==targetOrd || targetOrd==-1){
resetPosition();
}else{
//交换
resetPosition();
changePosition();
}
currOrd = -1;
console.log(currOrd);
}
//归位；
function resetPosition(){
//把每个li进行定位，并指定图片；
var lis = $("#ul1").children;
for(var i=0;i<lis.length;i++){
lis[i].style.left = (i%cols)*unitWidth+"px";
lis[i].style.top = parseInt(i/cols)*unitHeight+"px";
}
}
function changePosition(){
//交换currOrd和targetOrd对应的li的背景图片
var str = $("#ul1").children[currOrd].style.backgroundPosition;
$("#ul1").children[currOrd].style.backgroundPosition = $("#ul1").children[targetOrd].style.backgroundPosition;
$("#ul1").children[targetOrd].style.backgroundPosition = str;
}
//获取某个点所处的区域（序号）
function getPositon(mouseXY){
for(var i=0;i<cols;i++){//i=0 1 2
if(mouseXY.x>=i*unitWidth && mouseXY.x<=(i+1)*unitWidth){ //i是列号
for(var j=0;j<rows;j++){
if(mouseXY.y>=j*unitHeight && mouseXY.y<=(j+1)*unitHeight){//j是行号
return j*cols+i;
}
}
}
}
return -1;
}
window.onload = function(){
initData();
initUI();
//给每个li绑定onmouseDown事件
lisBindOnmouseDown();
$("#btn01").onclick = function(){
rows = parseInt($("#rowsId").value);
cols = parseInt($("#colsId").value);
initData();
initUI();
lisBindOnmouseDown();
}
}
</script>