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、完整代码如下
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript">
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 }
]
SetSortPoint(p);
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);
}
//两个坐标比较大小
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;
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Javascript保存网页为图片借助于html2canvas库实现
借助于html2canvas库，把网页保存为Canvas画布，再把生成的canvas保存成图片，下面的示例，大家可以看看2014-09-09
下面小编就为大家分享一篇MUI 实现侧滑菜单及其主体部分上下滑动的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
本文主要介绍了Webpack常见使用配置小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
缩略图在网站中最常用的就是产品列表页面，一行显示几张图片，有的在图片底下带有标题、描述内容、按钮等信息。本文给大家介绍Bootstrap缩略图组件与警示框组件，感兴趣的朋友一起学习吧2016-04-04
这篇文章主要介绍了bootstrap基本配置，详细讲解如何下载并安装 Bootstrap，讨论 Bootstrap 文件结构，并通过一个实例演示它的用法。2017-07-07
下面小编就为大家带来一篇js基础之DOM中元素对象的属性方法详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
这篇文章主要介绍了微信小程序实现拖拽功能,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-09-09
这篇文章主要为大家介绍了webpack DefinePlugin源码入口解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了JavaScript中0和""比较引发的问题,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-05-05
下面小编就为大家带来一篇基于js对象,操作属性、方法详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
最新评论