JavaScript实现二维坐标点排序效果

今天给大家分享下最近web项目中出现的一个技术难点问题——坐标排序；

如下图所示，要求在前端页面上按顺序将下面5个模块的坐标依次保存至数据库

现在已知信息如下：

1、每个模块分别为一个div

2、每个div可随意拖动（故拖动之后的顺序是错乱的）

3、每个div的坐标（css绝对定位获得的left、top属性值）

现在已通过程序将5个模块div的坐标信息用一个对象数组保存

rush:js;"> var p = [ { id: 184,x: 0,y: 0 },{ id: 185,x: 320,{ id: 186,x: 30,y: 60 },{ id: 187,x: 150,y: 120 },{ id: 188,x: 130,y: 80 },{ id: 189,x: 100,y: 80 } ]

注：

id为每个模块唯一标志符（本实例用于提交数据库）

一、排序思考

1、排序规则如何制定？

客户及项目负责人没有具体说明规则，所以需要由技术人员按照技术方面的常规逻辑进行分析。

按照我们理解，上面5个div的正常情况下的顺序应该是：从上到下，从左到右

2、排序算法如何实现？

根据上面得出的排序规则，我们需要分别对两点的y、x坐标分别比较，确定出排序

A、从上到下：坐标y越小，越排在前面

B、从左到右：坐标x越小，越排在前面

C、优先级为y坐标，若y坐标相等，则x坐标越小，越排在前面

二、代码实现

1、两点比较

我们先定义两个坐标点，编写代码进行比较

console.log(SetSortRule(p1,p2));

//两个坐标比较大小
function SetSortRule(p1,p2) {
if (p1.y > p2.y) {
return true;
}
else if (p1.y == p2.y) {
return (p1.x > p2.x);
}
else {
return false;
}
}

关键代码：SetSortRule（p1,p2）

p1,p2分别为需要比较的两点对象

这样一来，我们对于两个点的排序就可以实现了，接下来就是对上面对象数组中的5个点进行排序。

2、多点比较

我们再来观察下这5个点构成的对象数组

rush:js;"> var p = [ { id: 184,y: 80 } ]

5个点对象两两比较，这里就得用到冒泡排序法

既然是冒泡排序，大家都应该挺熟悉的吧，这里就不再细讲，直接上代码

rush:js;"> function SetSortPoint(arry) { var len = arry.length; for (var i = 0; i < len - 1; i++) { for (var j = 0; j < len - 1 - i; j++) { if (SetSortRule(arry[j],arry[j + 1])) { var tmp = arry[j]; arry[j] = arry[j + 1]; arry[j + 1] = tmp; } } } console.log(arry); }

arry为对象数组（此实例为p对象数组） SetSortRule(arry[j],arry[j + 1])，为两个点进行比较

3、输出效果

最终输出结果如下图，这里我就用浏览器console一下了

4、完整代码如下

rush:xhtml;">

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。