今天给大家分享下最近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. 基于类（Java）和基于原理（JavaScript）的对象系统的比较
			
    Java:面向对象编程语言,吸收了C++语言的各种优点,丢掉了C++让人头疼的多继承.指针等概念.具有功能强大和简单易用的两大特征.Java具有简单性.面向对象.分布式.健壮性.安全性.平台独立与可移 ...
    
			
    2. 
						
  2. 小K的H5之旅-HTML的基本结构与基本标签
			
    一.什么是HTML HTML是超文本标签语言,即网页的源码.而浏览器就是翻译解释HTML源码的工具. 二.HTML文档的结构 HTML文档主要包括三大部分:文档声明部分.<head>头部部 ...
    
			
    3. 
						
  3. MySql的学习笔记
			
    良好的理解sql语句: 列:理解可以运算的成变量 where: 理解成表达式,放在行中看是否成立 查出来的结果可以当成一张表理解,select 套用select综合查询:   五种查询 where g ...
    
			
    4. 
						
  4. 初识Tensorboard
			
    1.什么是Tensorboard? PPT设计原则中有这样一条,叫"文不如表,表不如图",可见图表在表达中更为直观.明确.程序设计中也是一样,我们经常用图表来描述程序的结构和流程, ...
    
			
    5. 
						
  5. Context源码分析
			
    我们做安卓开发,时时都在和Context打交道,那么Context到底是什么?有什么作用?如何与Application,Activity,Service等实例发生联系的?等等 Context是什么?  ...
    
			
    6. 
						
  6. 使用 Python 进行并发编程 -- asyncio (未完)
			
    参考地址 参考地址 参考地址 Python 2 时代, 高性能的网络编程主要是使用 Twisted, Tornado, Gevent 这三个库. 但是他们的异步代码相互之间不兼容越不能移植. asyn ...
    
			
    7. 
						
  7. nginx 配置https  负载均衡
			
    1.Winodw安装openssl工具(生成SSL证书用的)免编译版本下载: http://slproweb.com/products/Win32OpenSSL.html 注意:如果openssl在使 ...
    
			
    8. 
						
  8. 通知栏Notification的整理
			
    一.介绍 通知栏适用于交互事件的通知,是位于顶层可以展开的通知列表. 二.功能作用 1.显示接收到短消息,及时消息等信息(如QQ.微信.新浪.短信)       2.显示客户端的推送消息(如有新版本发 ...
    
			
    9. 
						
  9. Index Scans 索引扫描
			
    官方文档链接地址 http://docs.oracle.com/cd/E11882_01/server.112/e40540/indexiot.htm#CNCPT1170 Index Scans 在索 ...
    
			
    10. 
						
  10. js中的匿名函数自执行
			
    随笔,java中因为有修饰符的存在,那就有private类的存在,js不一样,没有修饰词一说,因此为了防止全局变量的污染,js中就出现了匿名函数,直接上code,看到的人可以自己体会: (functi ...
    
			
    11.