JavaScript实现二维坐标点排序效果


Posted in Javascript onJuly 18, 2017

今天给大家分享下最近web项目中出现的一个技术难点问题——坐标排序;

如下图所示,要求在前端页面上按顺序将下面5个模块的坐标依次保存至数据库

JavaScript实现二维坐标点排序效果

现在已知信息如下:

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一下了

JavaScript实现二维坐标点排序效果

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 相关文章推荐
LazyLoad 延迟加载(按需加载)
May 31 Javascript
js统计页面的来访次数实现代码
May 09 Javascript
jQuery实现跨域
Feb 03 Javascript
js获取当前日期时间及其它日期操作汇总
Mar 08 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
May 30 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
May 31 Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 Javascript
Bootstrap源码学习笔记之bootstrap进度条
Dec 24 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
Feb 08 Javascript
RequireJs的使用详解
Feb 19 Javascript
JS实现的二叉树算法完整实例
Apr 06 Javascript
express如何解决ajax跨域访问session失效问题详解
Jun 20 Javascript
Angular.js中angular-ui-router的简单实践
Jul 18 #Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 #jQuery
jquery版轮播图效果和extend扩展
Jul 18 #jQuery
Vue学习笔记进阶篇之vue-cli安装及介绍
Jul 18 #Javascript
深入解析Vue 组件命名那些事
Jul 18 #Javascript
js实现本地图片文件拖拽效果
Jul 18 #Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
Jul 18 #Javascript
You might like
Syphon 使用方法
2021/03/03 冲泡冲煮
动态新闻发布的实现及其技巧
2006/10/09 PHP
Windows 下的 PHP-PEAR 安装方法
2010/11/20 PHP
尝试在让script的type属性等于text/html
2013/01/15 Javascript
JavaScript 32位整型无符号操作示例
2013/12/08 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
JavaScript DSL 流畅接口(使用链式调用)实例
2015/03/15 Javascript
javaScript中slice函数用法实例分析
2015/06/08 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
js实现卡片式项目管理界面UI设计效果
2015/12/08 Javascript
对angularJs中$sce服务安全显示html文本的实例
2018/09/30 Javascript
详解Vue项目部署遇到的问题及解决方案
2019/01/11 Javascript
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
重学JS之显示强制类型转换详解
2019/06/30 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
python使用datetime模块计算各种时间间隔的方法
2015/03/24 Python
python使用socket进行简单网络连接的方法
2015/04/29 Python
Python实现购物程序思路及代码
2017/07/24 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
Python Web编程之WSGI协议简介
2018/07/18 Python
Python 通过调用接口获取公交信息的实例
2018/12/17 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
用python wxpy管理微信公众号并利用微信获取自己的开源数据
2019/07/30 Python
Python编写memcached启动脚本代码实例
2020/08/14 Python
python 基于opencv去除图片阴影
2021/01/26 Python
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
数控技术与应用毕业生自荐信
2013/09/24 职场文书
九年级物理教学反思
2014/01/29 职场文书
领班岗位职责范文
2014/02/06 职场文书
2015年人事科工作总结
2015/04/28 职场文书
成事在人观后感
2015/06/16 职场文书
七年级之家长会发言稿范文
2019/09/04 职场文书
QT与javascript交互数据的实现
2021/05/26 Javascript
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android
Redis主从复制操作和配置详情
2022/09/23 Redis