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

前端之家收集整理的这篇文章主要介绍了JavaScript实现二维坐标点排序效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

现在已知信息如下:

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

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

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

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

注:

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个点构成的对象数组

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

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

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

3、输出效果

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

4、完整代码如下

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

猜你在找的JavaScript相关文章