得到图片的新顺序并写在新数组里，用JS怎么实现呢？有源码
日期：2014-05-16 浏览次数：20448 次
得到图片的新顺序并写在新数组里，用JS如何实现呢？有源码
有四张图片，图片名称放在数组里，按用户的要求拖动以后，图片的新顺序与数组里的图片顺序会不同，求问：如何得到拖动以后的图片顺序并保存在新数组里呢？
源代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>多张图片</title>
</head>
<body>
<script language="JavaScript">
//Pre-load your images here.
imgs=new Array("img/img_92.jpg","img/img_82.jpg","img/img_66.jpg","img/img_15.jpg")
//Alter nothing past here!
load=new Array()
for(i=0; i < imgs.length; i++){
load[i]=new Image();
load[i].src=imgs[i];
}
var ns=(document.layers);
var ns6=(document.getElementById&&!document.all);
var ie=(document.all);
var n=imgs.length;
var y=null;
var x=null;
var z=null;
var w=null;//Alternate id. Not used for this script.
if (ns||ns6){
window.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
document.releaseEvents(Event.MOUSEMOVE);
}
if (ns){window.onmousedown=down;window.onmouseup=up}
if (ie||document.getElementById){document.onmousedown=down;document.onmouseup=up}
function down(e){
if (ns){
window.onmousemove=move;
if (document.layers['pics'+e.target.name]){
z=document.layers['pics'+e.target.name];
y=e.layerY;
x=e.layerX;
document.layers['pics'+e.target.name].zIndex=n++;
}
else {return true}
w=z.name.charAt(z.name.length-1);
}
if (ie && window.event.srcElement.parentElement){
document.onmousemove=move;
if (window.event.srcElement.parentElement.id.indexOf("pics") != -1){
z=window.event.srcElement.parentElement;
y=window.event.offsetY;
x=window.event.offsetX;
w=window.event.srcElement.parentElement.id.charAt(window.event.srcElement.parentElement.id.length-1);
window.event.srcElement.parentElement.style.zIndex=n++;
}
}
if (ns6){
document.onmousemove=move;
if (e.target.parentNode.id.indexOf("pics") != -1){
z=e.target.parentNode.style;
x=e.clientX - parseInt(z.left);
y=e.clientY - parseInt(z.top);
w=e.target.parentNode.id.charAt(e.target.parentNode.id.length-1);
z.zIndex=n++;
}
}
return false;
}
function move(e){
if (ns && z){z.left=e.pageX-x;z.top=e.pageY-y;}
if (ns6 && z){z.top=parseInt(e.clientY)-y;z.left=parseInt(e.clientX)-x}
if (ie && z){z.style.posLeft=window.event.clientX-x;z.style.posTop=window.event.clientY-y}
return false;
}
function up(e){
if (ie||ns6)document.onmousemove=null;
if (ns)window.onmousemove=null;
z=null;
}
//-->
</script>
<div id="pics0" style="position:absolute;top:10px;left:10px;cursor:move">
<img src="img/img_92.jpg" name="0">
</div>
<div id="pics1" style="position:absolute;top:100px;left:10px;cursor:move">
<img src="img/img_82.jpg" name="1">
</div>
<div id="pics2" style="position:absolute;top:190px;left:10px;cursor:move">
<img src="img/img_66.jpg" name="2">
</div>
<div id="pics3" style="position:absolute;top:280px;left:10px;cursor:move">
<img src="img/img_15.jpg" name="3">
</div>
</body>
</html>
------解决方案--------------------
根据div的t
有四张图片，图片名称放在数组里，按用户的要求拖动以后，图片的新顺序与数组里的图片顺序会不同，求问：如何得到拖动以后的图片顺序并保存在新数组里呢？
源代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>多张图片</title>
</head>
<body>
<script language="JavaScript">
//Pre-load your images here.
imgs=new Array("img/img_92.jpg","img/img_82.jpg","img/img_66.jpg","img/img_15.jpg")
//Alter nothing past here!
load=new Array()
for(i=0; i < imgs.length; i++){
load[i]=new Image();
load[i].src=imgs[i];
}
var ns=(document.layers);
var ns6=(document.getElementById&&!document.all);
var ie=(document.all);
var n=imgs.length;
var y=null;
var x=null;
var z=null;
var w=null;//Alternate id. Not used for this script.
if (ns||ns6){
window.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
document.releaseEvents(Event.MOUSEMOVE);
}
if (ns){window.onmousedown=down;window.onmouseup=up}
if (ie||document.getElementById){document.onmousedown=down;document.onmouseup=up}
function down(e){
if (ns){
window.onmousemove=move;
if (document.layers['pics'+e.target.name]){
z=document.layers['pics'+e.target.name];
y=e.layerY;
x=e.layerX;
document.layers['pics'+e.target.name].zIndex=n++;
}
else {return true}
w=z.name.charAt(z.name.length-1);
}
if (ie && window.event.srcElement.parentElement){
document.onmousemove=move;
if (window.event.srcElement.parentElement.id.indexOf("pics") != -1){
z=window.event.srcElement.parentElement;
y=window.event.offsetY;
x=window.event.offsetX;
w=window.event.srcElement.parentElement.id.charAt(window.event.srcElement.parentElement.id.length-1);
window.event.srcElement.parentElement.style.zIndex=n++;
}
}
if (ns6){
document.onmousemove=move;
if (e.target.parentNode.id.indexOf("pics") != -1){
z=e.target.parentNode.style;
x=e.clientX - parseInt(z.left);
y=e.clientY - parseInt(z.top);
w=e.target.parentNode.id.charAt(e.target.parentNode.id.length-1);
z.zIndex=n++;
}
}
return false;
}
function move(e){
if (ns && z){z.left=e.pageX-x;z.top=e.pageY-y;}
if (ns6 && z){z.top=parseInt(e.clientY)-y;z.left=parseInt(e.clientX)-x}
if (ie && z){z.style.posLeft=window.event.clientX-x;z.style.posTop=window.event.clientY-y}
return false;
}
function up(e){
if (ie||ns6)document.onmousemove=null;
if (ns)window.onmousemove=null;
z=null;
}
//-->
</script>
<div id="pics0" style="position:absolute;top:10px;left:10px;cursor:move">
<img src="img/img_92.jpg" name="0">
</div>
<div id="pics1" style="position:absolute;top:100px;left:10px;cursor:move">
<img src="img/img_82.jpg" name="1">
</div>
<div id="pics2" style="position:absolute;top:190px;left:10px;cursor:move">
<img src="img/img_66.jpg" name="2">
</div>
<div id="pics3" style="position:absolute;top:280px;left:10px;cursor:move">
<img src="img/img_15.jpg" name="3">
</div>
</body>
</html>
------解决方案--------------------
根据div的t
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
