想做一个图片可以拖动互换位置的功能，求大神指点，下面的代码在电脑浏览器上可以拖动换位置，手机上不行。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta content="width=device-width, initial-scale=1" name="viewport" >
<title>ABC</title>
<link rel="stylesheet" type="text/css" href="css/share.css">
<link rel="stylesheet" id="link1" type="text/css" href="css/detail_1.css">
<script type="text/javascript" >
// JavaScript Document
function startMove(obj,json,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var bBtn = true;
for(var attr in json){
var iCur = 0;
if( attr == 'opacity'){
iCur = Math.round(getStyle(obj,attr)*100);
}else{
iCur = parseInt(getStyle(obj,attr));
}
var iSpeed = (json[attr] - iCur)/8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(iCur != json[attr]){
bBtn = false;
}
if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity='+ (iCur+iSpeed) +')';
obj.style.opacity = (iCur+iSpeed)/100;
}else{
obj.style[attr] = iCur + iSpeed + 'px';
}
}
if(bBtn){
clearInterval(obj.timer);
if(fn){
fn.call(obj);
}
}
},30);
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
function getByClass(sClass,oParent){
var parent = oParent || document;
var aEles = parent.getElementsByTagName('*');
var arr = [];
for(var i=0; i<aEles.length; i++){
var aClass = aEles[i].className.split(' ');
for(var j=0; j<aClass.length; j++){
if(aClass[j] == sClass){
arr.push(aEles[i]);
}
}
}
return arr;
}
</script>
</head>
<body>
<section class="search_bg">
<ul class="search_list" id="ul1">
<li><a href="javascript:;" class="icon_1">新闻</a></li>
<li><a href="javascript:;" class="icon_2">电影</a></li>
<li><a href="javascript:;" class="icon_3">电视剧</a></li>
<li><a href="javascript:;" class="icon_4">娱乐</a></li>
<li><a href="javascript:;" class="icon_5">体育</a></li>
<li><a href="javascript:;" class="icon_6">军事</a></li>
<li><a href="javascript:;" class="icon_7">法制</a></li>
<li><a href="javascript:;" class="icon_8">纪录片</a></li>
<li><a href="javascript:;" class="icon_9">健康</a></li>
<li><a href="javascript:;" class="icon_10">教育</a></li>
<li><a href="javascript:;" class="icon_11">时尚</a></li>
<li><a href="javascript:;" class="icon_12">财经</a></li>
<li><a href="javascript:;" class="icon_13">原创</a></li>
<li><a href="javascript:;" class="icon_14">搞笑</a></li>
<li><a href="javascript:;" class="icon_15">动漫</a></li>
</ul>
</section>
<!--栏目-->
<script type="text/javascript">
window.onload = function(){
/*拖拽图片效果*/
var oUl=document.getElementById('ul1');
var aLi=oUl.getElementsByTagName('li');
var aPos=[];
var iMinZindex=2;
var i=0;
//布局转换
for(i=0;i<aLi.length;i++){
aPos[i]={left: aLi[i].offsetLeft, top: aLi[i].offsetTop};
}
for(i=0;i<aLi.length;i++){
aLi[i].style.left=aPos[i].left+'px';
aLi[i].style.top=aPos[i].top+'px';
aLi[i].style.position='absolute';
aLi[i].style.margin='0';
aLi[i].index=i;
}
//拖拽
for(i=0;i<aLi.length;i++){
setDrag(aLi[i]);
}
function setDrag(obj){
obj.onmousedown=function (ev){
var oEvent=ev||event;
obj.style.zIndex=iMinZindex++;
var disX=oEvent.clientX-obj.offsetLeft;
var disY=oEvent.clientY-obj.offsetTop;
document.onmousemove=function (ev){
var oEvent=ev||event;
obj.style.left=oEvent.clientX-disX+'px';
obj.style.top=oEvent.clientY-disY+'px';
for(i=0;i<aLi.length;i++){
aLi[i].className='';
}
var oNear=findNearest(obj);
if(oNear){
oNear.className='active';
}
};
document.onmouseup=function (){
document.onmousemove=null;
document.onmouseup=null;
var oNear=findNearest(obj);
if(oNear){
oNear.className='';
oNear.style.zIndex=iMinZindex++;
obj.style.zIndex=iMinZindex++;
startMove(oNear, aPos[obj.index]);
startMove(obj, aPos[oNear.index]);
var tmp=0;
tmp=obj.index;
obj.index=oNear.index;
oNear.index=tmp;
}else{
startMove(obj, aPos[obj.index]);
}
var disX2=oEvent.clientX-obj.offsetLeft;
var disY2=oEvent.clientY-obj.offsetTop;
if(disX2==disX || disY2==disY){
location.href='http://www.baidu.com';
}
};
clearInterval(obj.timer);
return false;
};
}
//碰撞检测
function cdTest(obj1, obj2){
var l1=obj1.offsetLeft;
var r1=obj1.offsetLeft+obj1.offsetWidth;
var t1=obj1.offsetTop;
var b1=obj1.offsetTop+obj1.offsetHeight;
var l2=obj2.offsetLeft;
var r2=obj2.offsetLeft+obj2.offsetWidth;
var t2=obj2.offsetTop;
var b2=obj2.offsetTop+obj2.offsetHeight;
if(r1<l2 || l1>r2 || b1<t2 || t1>b2){
return false;
}else{
return true;
}
}
function getDis(obj1, obj2){
var a=obj1.offsetLeft-obj2.offsetLeft;
var b=obj1.offsetTop-obj2.offsetTop;
return Math.sqrt(a*a+b*b);
}
function findNearest(obj){//找到碰上的，并且最近的
var iMin=999999999;
var iMinIndex=-1;
for(i=0;i<aLi.length;i++){
if(obj==aLi[i])continue;
if(cdTest(obj, aLi[i])){
var dis=getDis(obj, aLi[i]);
if(iMin>dis){
iMin=dis;
iMinIndex=i;
}
}
}
if(iMinIndex==-1){
return null;
}else{
return aLi[iMinIndex];
}
}
//运动
}
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta content="width=device-width, initial-scale=1" name="viewport" >
<title>ABC</title>
<link rel="stylesheet" type="text/css" href="css/share.css">
<link rel="stylesheet" id="link1" type="text/css" href="css/detail_1.css">
<script type="text/javascript" >
// JavaScript Document
function startMove(obj,json,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var bBtn = true;
for(var attr in json){
var iCur = 0;
if( attr == 'opacity'){
iCur = Math.round(getStyle(obj,attr)*100);
}else{
iCur = parseInt(getStyle(obj,attr));
}
var iSpeed = (json[attr] - iCur)/8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(iCur != json[attr]){
bBtn = false;
}
if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity='+ (iCur+iSpeed) +')';
obj.style.opacity = (iCur+iSpeed)/100;
}else{
obj.style[attr] = iCur + iSpeed + 'px';
}
}
if(bBtn){
clearInterval(obj.timer);
if(fn){
fn.call(obj);
}
}
},30);
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
function getByClass(sClass,oParent){
var parent = oParent || document;
var aEles = parent.getElementsByTagName('*');
var arr = [];
for(var i=0; i<aEles.length; i++){
var aClass = aEles[i].className.split(' ');
for(var j=0; j<aClass.length; j++){
if(aClass[j] == sClass){
arr.push(aEles[i]);
}
}
}
return arr;
}
</script>
</head>
<body>
<section class="search_bg">
<ul class="search_list" id="ul1">
<li><a href="javascript:;" class="icon_1">新闻</a></li>
<li><a href="javascript:;" class="icon_2">电影</a></li>
<li><a href="javascript:;" class="icon_3">电视剧</a></li>
<li><a href="javascript:;" class="icon_4">娱乐</a></li>
<li><a href="javascript:;" class="icon_5">体育</a></li>
<li><a href="javascript:;" class="icon_6">军事</a></li>
<li><a href="javascript:;" class="icon_7">法制</a></li>
<li><a href="javascript:;" class="icon_8">纪录片</a></li>
<li><a href="javascript:;" class="icon_9">健康</a></li>
<li><a href="javascript:;" class="icon_10">教育</a></li>
<li><a href="javascript:;" class="icon_11">时尚</a></li>
<li><a href="javascript:;" class="icon_12">财经</a></li>
<li><a href="javascript:;" class="icon_13">原创</a></li>
<li><a href="javascript:;" class="icon_14">搞笑</a></li>
<li><a href="javascript:;" class="icon_15">动漫</a></li>
</ul>
</section>
<!--栏目-->
<script type="text/javascript">
window.onload = function(){
/*拖拽图片效果*/
var oUl=document.getElementById('ul1');
var aLi=oUl.getElementsByTagName('li');
var aPos=[];
var iMinZindex=2;
var i=0;
//布局转换
for(i=0;i<aLi.length;i++){
aPos[i]={left: aLi[i].offsetLeft, top: aLi[i].offsetTop};
}
for(i=0;i<aLi.length;i++){
aLi[i].style.left=aPos[i].left+'px';
aLi[i].style.top=aPos[i].top+'px';
aLi[i].style.position='absolute';
aLi[i].style.margin='0';
aLi[i].index=i;
}
//拖拽
for(i=0;i<aLi.length;i++){
setDrag(aLi[i]);
}
function setDrag(obj){
obj.onmousedown=function (ev){
var oEvent=ev||event;
obj.style.zIndex=iMinZindex++;
var disX=oEvent.clientX-obj.offsetLeft;
var disY=oEvent.clientY-obj.offsetTop;
document.onmousemove=function (ev){
var oEvent=ev||event;
obj.style.left=oEvent.clientX-disX+'px';
obj.style.top=oEvent.clientY-disY+'px';
for(i=0;i<aLi.length;i++){
aLi[i].className='';
}
var oNear=findNearest(obj);
if(oNear){
oNear.className='active';
}
};
document.onmouseup=function (){
document.onmousemove=null;
document.onmouseup=null;
var oNear=findNearest(obj);
if(oNear){
oNear.className='';
oNear.style.zIndex=iMinZindex++;
obj.style.zIndex=iMinZindex++;
startMove(oNear, aPos[obj.index]);
startMove(obj, aPos[oNear.index]);
var tmp=0;
tmp=obj.index;
obj.index=oNear.index;
oNear.index=tmp;
}else{
startMove(obj, aPos[obj.index]);
}
var disX2=oEvent.clientX-obj.offsetLeft;
var disY2=oEvent.clientY-obj.offsetTop;
if(disX2==disX || disY2==disY){
location.href='http://www.baidu.com';
}
};
clearInterval(obj.timer);
return false;
};
}
//碰撞检测
function cdTest(obj1, obj2){
var l1=obj1.offsetLeft;
var r1=obj1.offsetLeft+obj1.offsetWidth;
var t1=obj1.offsetTop;
var b1=obj1.offsetTop+obj1.offsetHeight;
var l2=obj2.offsetLeft;
var r2=obj2.offsetLeft+obj2.offsetWidth;
var t2=obj2.offsetTop;
var b2=obj2.offsetTop+obj2.offsetHeight;
if(r1<l2 || l1>r2 || b1<t2 || t1>b2){
return false;
}else{
return true;
}
}
function getDis(obj1, obj2){
var a=obj1.offsetLeft-obj2.offsetLeft;
var b=obj1.offsetTop-obj2.offsetTop;
return Math.sqrt(a*a+b*b);
}
function findNearest(obj){//找到碰上的，并且最近的
var iMin=999999999;
var iMinIndex=-1;
for(i=0;i<aLi.length;i++){
if(obj==aLi[i])continue;
if(cdTest(obj, aLi[i])){
var dis=getDis(obj, aLi[i]);
if(iMin>dis){
iMin=dis;
iMinIndex=i;
}
}
}
if(iMinIndex==-1){
return null;
}else{
return aLi[iMinIndex];
}
}
//运动
}
</script>
</body>
</html>
