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 相关文章推荐
js实现权限树的更新权限时的全选全消功能
Feb 17 Javascript
JavaScript 构造函数 面相对象学习必备知识
Jun 09 Javascript
在vs2010中调试javascript代码方法
Feb 11 Javascript
JQuery对id中含有特殊字符的转义处理示例
Sep 06 Javascript
用队列模拟jquery的动画算法实例
Jan 20 Javascript
JavaScript实现select添加option
Jul 03 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
Aug 06 Javascript
HTML5 实现的一个俄罗斯方块实例代码
Sep 19 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
Vue下的国际化处理方法
Dec 18 Javascript
JavaScript中window和document用法详解
Jul 28 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
Aug 19 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
PHP读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
php+xml编程之xpath的应用实例
2015/01/24 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
Prototype Array对象 学习
2009/07/19 Javascript
innerText和textContent对比及使用介绍
2013/02/27 Javascript
jquery JSON的解析方式示例介绍
2014/07/27 Javascript
javascript显式类型转换实例分析
2015/04/25 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
WebView启动支付宝客户端支付失败的问题小结
2017/01/11 Javascript
js实现按座位号抽奖
2017/04/05 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
2017/08/08 Javascript
javascript 中模板方法单例的实现方法
2017/10/17 Javascript
Vue组件和Route的生命周期实例详解
2018/02/10 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
js瀑布流布局的实现
2020/06/28 Javascript
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
python django 实现验证码的功能实例代码
2017/05/18 Python
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
python如何使用unittest测试接口
2018/04/04 Python
Django 登陆验证码和中间件的实现
2018/08/17 Python
解决python 执行sql语句时所传参数含有单引号的问题
2020/06/06 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
python 实现百度网盘非会员上传超过500个文件的方法
2021/01/07 Python
CSS3弹性布局内容对齐(justify-content)属性使用详解
2017/07/31 HTML / CSS
售后服务经理岗位职责范本
2014/02/22 职场文书
北体毕业生求职信
2014/02/28 职场文书
团日活动总结书格式
2014/05/08 职场文书
领导干部考核评语
2015/01/04 职场文书
销售助理岗位职责
2015/02/11 职场文书
2016会计专业自荐信范文
2016/01/28 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python
Html5调用企业微信的实现
2021/04/16 HTML / CSS
vue项目中的支付功能实现(微信支付和支付宝支付)
2022/02/18 Vue.js
配置nginx负载均衡
2022/05/06 Servers