图片排序后,如何获取新的排序啊?

彼岸停歇 2015-06-11 07:39:10
下面是我找个图片排序demo,但是我不知道如何获取排序完成后,img标签的ID顺便,我试了试,我获取的ID顺序是不会变的……



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS图片拖拽排序效果代码</title>
<style>
* {margin:0; padding:0;list-style: none}

#ul1 {width:100%; position:relative; margin:10px auto;}
#ul1 li {width:200px; height:150px; float:left; list-style:none; margin:10px;}
#ul1 li:hover{ border-color: #9a9fa4; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.85);}
#ul1 .active{ border:1px dashed red;}
</style>
<script type="text/javascript" src="move.js"></script>
<script>
window.onload = function() {
var oUl= document.getElementById("ul1");
var aLi = oUl.getElementsByTagName("li");
var disX = 0;
var disY = 0;
var minZindex = 1;
var aPos =[];
for(var i=0;i<aLi.length;i++){
var t = aLi[i].offsetTop;
var l = aLi[i].offsetLeft;
aLi[i].style.top = t+"px";
aLi[i].style.left = l+"px";
aPos[i] = {left:l,top:t};
aLi[i].index = i;
}
for(var i=0;i<aLi.length;i++){
aLi[i].style.position = "absolute";
aLi[i].style.margin = 0;
setDrag(aLi[i]);
}
//拖拽
function setDrag(obj){
obj.onmouseover = function(){
obj.style.cursor = "move";
}
obj.onmousedown = function(event){
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
obj.style.zIndex = minZindex++;
//当鼠标按下时计算鼠标与拖拽对象的距离
disX = event.clientX +scrollLeft-obj.offsetLeft;
disY = event.clientY +scrollTop-obj.offsetTop;
document.onmousemove=function(event){
//当鼠标拖动时计算div的位置
var l = event.clientX -disX +scrollLeft;
var t = event.clientY -disY + scrollTop;
obj.style.left = l + "px";
obj.style.top = t + "px";
/*for(var i=0;i<aLi.length;i++){
aLi[i].className = "";
if(obj==aLi[i])continue;//如果是自己则跳过自己不加红色虚线
if(colTest(obj,aLi[i])){
aLi[i].className = "active";
}
}*/
for(var i=0;i<aLi.length;i++){
aLi[i].className = "";
}
var oNear = findMin(obj);
if(oNear){
oNear.className = "active";
}
}
document.onmouseup = function(){
document.onmousemove = null;//当鼠标弹起时移出移动事件
document.onmouseup = null;//移出up事件,清空内存
//检测是否普碰上,在交换位置
var oNear = findMin(obj);
if(oNear){
oNear.className = "";
oNear.style.zIndex = minZindex++;
obj.style.zIndex = minZindex++;
startMove(oNear,aPos[obj.index]);
startMove(obj,aPos[oNear.index]);
//交换index
oNear.index += obj.index;
obj.index = oNear.index - obj.index;
oNear.index = oNear.index - obj.index;
}else{

startMove(obj,aPos[obj.index]);
}
}
clearInterval(obj.timer);
return false;//低版本出现禁止符号
}
}
//碰撞检测
function colTest(obj1,obj2){
var t1 = obj1.offsetTop;
var r1 = obj1.offsetWidth+obj1.offsetLeft;
var b1 = obj1.offsetHeight+obj1.offsetTop;
var l1 = obj1.offsetLeft;

var t2 = obj2.offsetTop;
var r2 = obj2.offsetWidth+obj2.offsetLeft;
var b2 = obj2.offsetHeight+obj2.offsetTop;
var l2 = obj2.offsetLeft;

if(t1>b2||r1<l2||b1<t2||l1>r2){
return false;
}else{
return true;
}
}
//勾股定理求距离
function getDis(obj1,obj2){
var a = obj1.offsetLeft-obj2.offsetLeft;
var b = obj1.offsetTop-obj2.offsetTop;
return Math.sqrt(Math.pow(a,2)+Math.pow(b,2));
}
//找到距离最近的
function findMin(obj){
var minDis = 999999999;
var minIndex = -1;
for(var i=0;i<aLi.length;i++){
if(obj==aLi[i])continue;
if(colTest(obj,aLi[i])){
var dis = getDis(obj,aLi[i]);
if(dis<minDis){
minDis = dis;
minIndex = i;
}
}
}
if(minIndex==-1){
return null;
}else{
return aLi[minIndex];
}
}
}
</script>
</head>
<body>
<ul id="ul1">
<li><img id="1" src="images/1.jpg" width="200" height="150" /></li>
<li><img id="2" src="images/2.jpg" width="200" height="150" /></li>
<li><img id="3" src="images/3.jpg" width="200" height="150" /></li>
<li><img id="4" src="images/4.jpg" width="200" height="150" /></li>
<li><img id="5" src="images/5.jpg" width="200" height="150" /></li>
<li><img id="6" src="images/6.jpg" width="200" height="150" /></li>
</ul>
</body>
</html>



//通过class获取元素
function getClass(cls){
var ret = [];
var els = document.getElementsByTagName("*");
for (var i = 0; i < els.length; i++){
//判断els[i]中是否存在cls这个className;.indexOf("cls")判断cls存在的下标,如果下标>=0则存在;
if(els[i].className === cls || els[i].className.indexOf("cls")>=0 || els[i].className.indexOf(" cls")>=0 || els[i].className.indexOf(" cls ")>0){
ret.push(els[i]);
}
}
return ret;
}
function getStyle(obj,attr){//解决JS兼容问题获取正确的属性值
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];
}
function startMove(obj,json,fun){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var isStop = true;
for(var attr in json){
var iCur = 0;
//判断运动的是不是透明度值
if(attr=="opacity"){
iCur = parseInt(parseFloat(getStyle(obj,attr))*100);
}else{
iCur = parseInt(getStyle(obj,attr));
}
var ispeed = (json[attr]-iCur)/8;
//运动速度如果大于0则向下取整,如果小于0想上取整;
ispeed = ispeed>0?Math.ceil(ispeed):Math.floor(ispeed);
//判断所有运动是否全部完成
if(iCur!=json[attr]){
isStop = false;
}
//运动开始
if(attr=="opacity"){
obj.style.filter = "alpha:(opacity:"+(json[attr]+ispeed)+")";
obj.style.opacity = (json[attr]+ispeed)/100;
}else{
obj.style[attr] = iCur+ispeed+"px";
}
}
//判断是否全部完成
if(isStop){
clearInterval(obj.timer);
if(fun){
fun();
}
}
},30);
}
...全文
158 8 打赏 收藏 转发到动态 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
彼岸停歇 2015-06-24
  • 打赏
  • 举报
回复
引用 7 楼 jslang 的回复:
[quote=引用 3 楼 QQ1904818 的回复:] [quote=引用 2 楼 jslang 的回复:] li元素自定义的.index 属性不就是顺序么
能具体说说么?不太明白啊[/quote]

function aaa()
{
	var oUl= document.getElementById("ul1");
	var aLi = oUl.getElementsByTagName("li");
	var arr = [];
	for(var i=0,l = aLi.length; i<l; i++)
		arr.push(aLi[i].index)
	alert(arr);
}

<input type="button" value="获取新顺序" onclick="aaa()" />

[/quote]这种方法 index交换时有时候错误,我用绕圈的方式把这个问题解决了,谢谢您!
香蕉猪 2015-06-12
  • 打赏
  • 举报
回复
引用 5 楼 QQ1904818 的回复:
应该还是有方法的吧,本人手艺不精,所以无解
有,,,,若没理解错,楼主想要的是
<li><img id="1" src="images/1.jpg" width="200" height="150" /></li>
    <li><img id="2" src="images/2.jpg" width="200" height="150" /></li>
    <li><img id="3" src="images/3.jpg" width="200" height="150" /></li>
    <li><img id="4" src="images/4.jpg" width="200" height="150" /></li>
    <li><img id="5" src="images/5.jpg" width="200" height="150" /></li>
    <li><img id="6" src="images/6.jpg" width="200" height="150" /></li>
排序的更新。。。那么,,,就需要用到jq或者ajax一类,,,将此处重写。。。
彼岸停歇 2015-06-12
  • 打赏
  • 举报
回复
引用 4 楼 gy127132060 的回复:
值得一提的是,,楼主这段代码在实际运行的时候效果不错。。。 但楼主要获取新的排序,就需要在执行Move的时候采用jq或者其他什么方式,,,将html 中被移动的img提取出来,根据新的位置进行相关重写。。。 实话说,,,本人并未见到相关重写代码。。。
应该还是有方法的吧,本人手艺不精,所以无解
香蕉猪 2015-06-12
  • 打赏
  • 举报
回复
值得一提的是,,楼主这段代码在实际运行的时候效果不错。。。 但楼主要获取新的排序,就需要在执行Move的时候采用jq或者其他什么方式,,,将html 中被移动的img提取出来,根据新的位置进行相关重写。。。 实话说,,,本人并未见到相关重写代码。。。
彼岸停歇 2015-06-12
  • 打赏
  • 举报
回复
引用 2 楼 jslang 的回复:
li元素自定义的.index 属性不就是顺序么
能具体说说么?不太明白啊
天际的海浪 2015-06-12
  • 打赏
  • 举报
回复
引用 3 楼 QQ1904818 的回复:
[quote=引用 2 楼 jslang 的回复:] li元素自定义的.index 属性不就是顺序么
能具体说说么?不太明白啊[/quote]

function aaa()
{
	var oUl= document.getElementById("ul1");
	var aLi = oUl.getElementsByTagName("li");
	var arr = [];
	for(var i=0,l = aLi.length; i<l; i++)
		arr.push(aLi[i].index)
	alert(arr);
}

<input type="button" value="获取新顺序" onclick="aaa()" />

天际的海浪 2015-06-11
  • 打赏
  • 举报
回复
li元素自定义的.index 属性不就是顺序么
彼岸停歇 2015-06-11
  • 打赏
  • 举报
回复
为毛没人呢

87,954

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧