今天给大家分享下最近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. [c++]大数运算1---利用C++ string实现任意长度正小数、整数之间的加减法
			
    一.概述 本文属于大大维原创,未经笔者本人允许,严禁转载!!! C/C++中的int类型能表示的范围是-2E31-2E31–1.unsigned类型能表示的范围是0-2E32–1,即 0-429496 ...
    
			
    2. 
						
  2. Java IO流之转换流
			
    一.转换流 1.在IO包中,实际上就是分为字节流和字符流,但是除了这两个流之外,还存在了一组字节流-字符流的转换流 2.转换流用于在字节流和字符流之间转换 3.转换流本身是字符流 二.两种转换流 Ou ...
    
			
    3. 
						
  3. 什么是 html 标签，html 实体
			
    为什么需要转换 更简了,因为有时候我们需要在浏览器页面中显示 html 标签,然而直接输出<script>alert(1)</script>,在浏览页面时将会被当作 html  ...
    
			
    4. 
						
  4. 每天一个JS 小demo之留言板。主要知识点：DOM方法的理解和运用
			
    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
    
			
    5. 
						
  5. TCP慢启动，拥塞控制，ECN 笔记
			
    TCP慢启动,拥塞控制,ECN 笔记 1,TCP慢启动 TCP在连接过程的三次握手完成后,开始传数据,并不是一开始向网络通道中发送大量的数据包,这样很容易导致网络中路由器缓存空间耗尽,从而发生拥塞:而 ...
    
			
    6. 
						
  6. SOD开源框架MSF（消息服务框架）进阶篇
			
    复习:在上一篇我介绍了MSF的基本订阅,模式就是,客户端A,订阅服务器.客户端B,订阅服务器.通过服务器广播消息, 所有订阅过的客户端都能接到消息. 进阶:在上一篇的基础上,增加客户端A,发送信息到服 ...
    
			
    7. 
						
  7. nvarchar 和varchar区别
			
    有时候设计字段的时候,碰到nvarchar和varchar时候,是有点犹豫.所以今天就来探个究竟把. (一)  varchar是非Unicode可变长度类型,nvarchar是Unicode编码可变长 ...
    
			
    8. 
						
  8. 解决yii框架，gii脚手架不能使用。
			
    应用场景 把代码转移到线上服务器时,GII.BUG工具不正常使用,但在本地服务器是正常的. 分析原因 Yii框架在使用GII 和BUG 时,会针对访问IP地址拦截,没有在配置中设置的IP地址是会默认被 ...
    
			
    9. 
						
  9. 7.如何发布vue项目到服务器
			
    1.确保程序是可运行的,即npm run dev可以运行 2.把index.js修改 3.运行npm命令npm run build 4.生成的dist文件为 直接点击index.html就能运行,部署 ...
    
			
    10. 
						
  10. CSS样式之连接方式
			
    前言:上一篇博客是HTML基本结构和标签,是笔者学习HTML的笔记,本篇博客开始记录CSS,废话不多说,直接进入主题. 首先,我们要知道CSS是什么.简单地说,CSS层叠样式表是用来表现HTML或XM ...
    
			
    11.