今天给大家分享下最近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）的更多相关文章
	

    
								
  1. UVALive 5102 Fermat Point in Quadrangle 极角排序+找距离二维坐标4个点近期的点
		
    题目链接:点击打开链接 题意: 给定二维坐标上的4个点 问: 找一个点使得这个点距离4个点的距离和最小 输出距离和. 思路: 若4个点不是凸4边形.则一定是端点最优. 否则就是2条对角线的交点最优,能 ...
    
		
    2. 
						
  2. Win窗口坐标二维坐标与OpenGl的世界坐标系的之间的相互转换
		
    Win窗口坐标二维坐标与OpenGl的世界坐标系的转换 几何处理管线擅长于使用视图和投影矩阵以及用于裁剪的视口把顶点的世界坐标变换为窗口坐标. 但是,在有些情况下,需要逆转这个过程.一种常见的情形是: ...
    
		
    3. 
						
  3. 代码分享：php对二维数组进行排序
		
    发布:net/PHP编程  编辑:thebaby   2013-06-28 13:12:54  [大 中 小] 转自:http://www.jbxue.com/article/9991.html本文介 ...
    
		
    4. 
						
  4. 二维坐标的平移，旋转，缩放及matlab实现
		
    本文结合matlab 软件解释二维坐标系下的平移,旋转,缩放 首先确定点在二维坐标系下的表达方法,使用一个1*3矩阵: Pt = [x,y,1] 其中x,y 分别为点的X,Y坐标,1为对二维坐标的三维 ...
    
		
    5. 
						
  5. OpenGL屏幕二维坐标转化成三维模型坐标
		
    我们把OpenGL里模型的三维坐标往二维坐标的转化称为投影,则屏幕上的二维坐标往三维坐标转化则可以称为反投影,下面我们来介绍一下反投影的方法. 主要是gluUnProject函数的使用,下面是代码:  ...
    
		
    6. 
						
  6. php对二维数据进行排序
		
    PHP一维数组的排序可以用sort(),asort(),arsort()等函数,但是PHP二维数组的排序需要自定义. 方法一:(经验证,成功)   作用:对二维数组进行指定key排序 参数:$arr  ...
    
		
    7. 
						
  7. php 二维数组自定义排序
		
    eg1:只根据一个规则进行排序,比如我下面的数组是一组满减折扣的信息,我要按照满减的金额从小到大排序 代码: <?php $arr =[ ["amount"=> 60, ...
    
		
    8. 
						
  8. 用C#控制台编写 推箱子之类的  坐标移动----之二维坐标
		
     //首先用枚举 列出方向  上,下,左,右(枚举的最后一位数后不用符号  否则会报错)        public enum dro    {       up = 1,        down = ...
    
		
    9. 
						
  9. Java 二维数组，排序、切换顺序，查表法二进制十进制，这班查找、排序（冒泡、选择）、遍历，获取最大小值（4）
		
    Java 二维数组,排序.切换顺序,查表法二进制十进制,折半查找.排序(冒泡.选择).遍历,获取最大小值(4)
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 你知道现在有一种新的OCR技术叫“移动端车牌识别”吗？
			
    核心内容:车牌识别.OCR识别技术.移动端车牌识别.手机端车牌识别.安卓车牌识别.Android车牌识别.iOS车牌识别 一.移动端车牌识别OCR技术研发原理 移动端车牌识别是基于OCR识别的一种应用 ...
    
			
    2. 
						
  2. C语言之循环结构
			
    程序结构: 顺序结构 条件结构(分支结构) if结构,if-else结构 ,多重if分支结构,switch结构 循环结构:做重复的事情 while循环,do..while循环和for循环. 写循环结构 ...
    
			
    3. 
						
  3. Docker手动配置Lamp镜像
			
    自从接了学长布置的任务,自学Docker也学了很久了,先整一个Lamp出来吧 在Docker Hub上找了很多Lamp的镜像 网上都说tutum的镜像做的还是不错的 试试 折腾了一上午无果... 算了 ...
    
			
    4. 
						
  4. Sql的连接表补充
			
        连接条件可在FROM或WHERE子句中指定,建议在FROM子句中指定连接条件.WHERE和HAVING子句也可以包含搜索条件,以进一步筛选连接条件所选的行.             连接可分为 ...
    
			
    5. 
						
  5. .net core中引用webservice，并忽略https证书验证
			
    1.打开vs, 工具-->扩展和更新 下载这个 2. 在admin下右键,添加-->connected service 选择wsdl文件路径,或者服务的url,比如https://**** ...
    
			
    6. 
						
  6. javascript中document.form[formName][]的意思
			
    近来重新学习javascript发现还有很多知识点模糊,今天就javascript中的document.forms[formName][inputName]进行说明: <!DOCTYPE htm ...
    
			
    7. 
						
  7. Deep Q-Network 学习笔记（二）—— Q-Learning与神经网络结合使用（有代码实现）
			
    参考资料: https://morvanzhou.github.io/ 非常感谢莫烦老师的教程 http://mnemstudio.org/path-finding-q-learning-tutori ...
    
			
    8. 
						
  8. spring boot 入门操作(二)
			
    spring boot入门操作 使用FastJson解析json数据 pom dependencies里添加fastjson依赖 <dependency> <groupId>c ...
    
			
    9. 
						
  9. C++汉诺塔递归实现
			
    程序背景: 汉诺塔(Tower of Hanoi)又称河内塔,问题是源于印度一个古老传说的益智玩具.大梵天创造世界的时候做了三根金刚石柱子,在一根柱子上从下往上按照大小顺序摞着64片黄金圆盘.大梵天命 ...
    
			
    10. 
						
  10. UWP的Converter妙用
			
    MVVM模式的使用,简化了UWP应用的开发,使层次更加分明.在写xaml的时候,有些小技术还是很实用的:比如Converter,字面上理解是转换器,那它到底是转换什么的?接触过的可能知道它起的是类型转 ...
    
			
    11.