小编给大家分享一下JavaScript实现二维坐标点排序效果的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
在洛浦等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供网站制作、成都网站建设 网站设计制作按需定制网站,公司网站建设,企业网站建设,品牌网站设计,全网营销推广,外贸营销网站建设,洛浦网站建设费用合理。今天给大家分享下最近web项目中出现的一个技术难点问题——坐标排序;
如下图所示,要求在前端页面上按顺序将下面5个模块的坐标依次保存至数据库
现在已知信息如下:
1、每个模块分别为一个div
2、每个div可随意拖动(故拖动之后的顺序是错乱的)
3、每个div的坐标(css绝对定位获得的left、top属性值)
现在已通过程序将5个模块div的坐标信息用一个对象数组保存
var p = [ { id: 184, x: 0, y: 0 }, { id: 185, x: 320, y: 0 }, { 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、两点比较
我们先定义两个坐标点,编写代码进行比较
var p1 = { x: 350, y: 0 }; var p2 = { x: 320, y: 0 }; 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个点构成的对象数组
var p = [ { id: 184, x: 0, y: 0 }, { id: 185, x: 320, y: 0 }, { id: 186, x: 30, y: 60 }, { id: 187, x: 150, y: 120 }, { id: 188, x: 130, y: 80 }, { id: 189, x: 100, y: 80 } ]
5个点对象两两比较,这里就得用到冒泡排序法
既然是冒泡排序,大家都应该挺熟悉的吧,这里就不再细讲,直接上代码
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、完整代码如下
以上是“JavaScript实现二维坐标点排序效果的方法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联网站建设公司行业资讯频道!
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。