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 相关文章推荐
兼容Mozilla必须知道的知识。
Jan 09 Javascript
node.js集成百度UE编辑器
Feb 05 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
jquery滚动条插件slimScroll使用方法
Feb 09 Javascript
详解vue2.0脚手架的webpack 配置文件分析
May 27 Javascript
Angularjs添加排序查询功能的实例代码
Oct 24 Javascript
单页面vue引入百度统计的使用方法示例详解
Oct 13 Javascript
React实现阿里云OSS上传文件的示例
Aug 10 Javascript
VUE Elemen-ui之穿梭框使用方法详解
Jan 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版(4)
2006/10/09 PHP
介绍几个array库的新函数 php
2006/12/29 PHP
手把手教你使用DedeCms的采集的图文教程
2007/03/11 PHP
PHP闭包(Closure)使用详解
2013/05/02 PHP
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
基于JQuery的一句代码实现表格的简单筛选
2010/07/26 Javascript
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
jquery应该如何来设置改变按钮input的onclick事件
2012/12/10 Javascript
js中的前绑定和后绑定详解
2013/08/01 Javascript
让复选框只能选择一项的方法
2013/10/08 Javascript
javascript scrollTop正解使用方法
2013/11/14 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
JS ES6多行字符串与连接字符串的表示方法
2017/04/26 Javascript
纯JavaScript实现实时反馈系统时间
2017/10/26 Javascript
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
Webpack3+React16代码分割的实现
2021/03/03 Javascript
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
[01:01:35]Optic vs paiN 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
python+opencv+caffe+摄像头做目标检测的实例代码
2018/08/03 Python
对python实现模板生成脚本的方法详解
2019/01/30 Python
如何不用安装python就能在.NET里调用Python库
2019/07/12 Python
Python 3 使用Pillow生成漂亮的分形树图片
2019/12/24 Python
Python利用 utf-8-sig 编码格式解决写入 csv 文件乱码问题
2020/02/21 Python
Python 如何创建一个线程池
2020/07/28 Python
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
公司财务总监岗位职责
2013/12/14 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
2014房屋登记授权委托书
2014/10/13 职场文书
音乐教师求职信范文
2015/03/20 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server