今天给大家分享下最近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 8——Optional
			
    本文主要介绍Java 8的 Optional 的简单使用 Address 1 2 3 4 5 6 7 @Data @AllArgsConstructor @NoArgsConstructor publ ...
    
			
    2. 
						
  2. java7增强的try语句关闭资源
			
    java7增强的try语句关闭资源 传统的关闭资源方式 import java.io.FileInputStream; import java.io.FileOutputStream; import  ...
    
			
    3. 
						
  3. Eclipse中常用的快捷键,敏捷开发必备.
			
    1. ctrl+shift+r:打开资源 这可能是所有快捷键组合中最省时间的了.这组快捷键可以让你打开你的工作区中任何一个文件,而你只需要按下文件名或mask名中的前几个字母,比如applic*.xm ...
    
			
    4. 
						
  4. Floyd判圈算法
			
    Floyd判圈算法 leetcode 上 编号为202 的happy number 问题,有点意思.happy number 的定义为: A happy number is a number defi ...
    
			
    5. 
						
  5. cpp(第六章)
			
    1. #include <iostream> #include <limits> int main() { ; ) { std::cout<<"enter ...
    
			
    6. 
						
  6. map,zip,reduce函数
			
    lt=range(5,10) lw=range(8,13) def mul(a,b): return a*b def mul_list(param1,param2): return_list=[] f ...
    
			
    7. 
						
  7. ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库
			
    1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处 ...
    
			
    8. 
						
  8. Vulkan Tutorial 18 重构交换链
			
    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 Introduction 现在我们已经成功的在屏幕上绘制出三角形,但是在某些情况下, ...
    
			
    9. 
						
  9. WPF MVVM 架构 Step By Step(3)（把后台代码移到一个类中）
			
    我觉得大部分开发者应该已经知道怎么去解决这个问题.一般都是把后台代码(GLUE code)移动到一个类库.这个类库用来代表UI的属性和行为.任何代码当被移到一个类库中时都可以被编译成一个DLL,然后可 ...
    
			
    10. 
						
  10. orcale设置自增列
			
    create sequence SEQ_ERRORID minvalue 1 maxvalue 99999999 start with 1000 increment by 1 nocache orde ...
    
			
    11.