今天给大家分享下最近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. SpringMVC——数据校验
			
    数据校验在web应用里是非常重要的功能,尤其是在表单输入中.在这里采用Hibernate-Validator进行校验,该方法实现了JSR-303验证框架支持注解风格的验证. 一.导入jar包 若要实现 ...
    
			
    2. 
						
  2. 微信小程序 支付功能（前端）的实现
			
    只提供微信小程序端代码: var app = getApp(); Page({ data: {}, onLoad: function (options) { // 页面初始化 options为页面跳转 ...
    
			
    3. 
						
  3. （转）java匿名内部类详解
			
    原文:http://android.blog.51cto.com/268543/384844/   内部类是指在一个外部类的内部再定义一个类.类名不需要和文件夹相同. *内部类可以是静态static的 ...
    
			
    4. 
						
  4. Asp.Net页面传值的方法简单总结【原创】
			
    1.QueryString 当页面上form按照get的方式向页面发送请求数据的时候,web server会将请求数据放入 一个QEURY_STRING的环境变量中,然后通过QeueryString方 ...
    
			
    5. 
						
  5. 高防TTCDN
			
    TCDN是深圳市云中漫网络科技公司高防CDN产品的品牌名称,既可以防御,也可以达到加速的效果,价格实惠.TTCDN适用于WEB应用,可以隐藏源站服务器IP,有效的减轻源站服务器压力,加快全国各地区线路 ...
    
			
    6. 
						
  6. STM8程序在IAR中报错 unable to allocate space for sections
			
    Error[Lp011]: section placement failed: unable to allocate space for sections/blocks with a total es ...
    
			
    7. 
						
  7. for循环 重点题
			
    1.冒泡排序  (特别重要): <script type="text/javascript"> var attr=Array(); for(var i=0; i< ...
    
			
    8. 
						
  8. springmvc 之 深入核心研究
			
    一.前言:二.核心类与接口:三.核心流程图四.DispatcherServlet说明五.双亲上下文的说明六.springMVC-mvc.xml 配置文件片段讲解 七.如何访问到静态的文件,如jpg,j ...
    
			
    9. 
						
  9. 用queue函数写广搜
			
    以走迷宫需要的最少步数的代码为例 #include<stdio.h>#include<string.h>#include<queue> using namespac ...
    
			
    10. 
						
  10. 摘记：LoadRunner
			
    infrastructure 基础结构 Load Testing:性能测试 predicts system behavior and performance exercises your entire ...
    
			
    11.