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 相关文章推荐
javascript笔试题目附答案@20081025_jb51.net
Oct 26 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
Aug 23 Javascript
css样式标签和js语法属性区别
Nov 06 Javascript
深入理解JQuery keyUp和keyDown的区别
Dec 12 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 Javascript
js ajaxfileupload.js上传报错的解决方法
May 05 Javascript
Html5+jQuery+CSS制作相册小记录
Dec 30 Javascript
详解本地Node.js服务器作为api服务器的解决办法
Feb 28 Javascript
zTree节点文字过多的处理方法
Nov 24 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
May 04 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
Jan 08 Javascript
详解Vue的options
May 15 Vue.js
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分页函数代码(简单实用型)
2010/12/02 PHP
PHP基础之运算符的使用方法
2013/04/28 PHP
怎么清空javascript数组
2013/05/11 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
2016/02/22 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
2017/01/16 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
JavaScript数据结构学习之数组、栈与队列
2017/05/02 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
微信小程序云开发之使用云函数
2019/05/17 Javascript
python的几种开发工具介绍
2007/03/07 Python
python实现的多线程端口扫描功能示例
2017/01/21 Python
Python数据拟合与广义线性回归算法学习
2017/12/22 Python
pytorch训练imagenet分类的方法
2018/07/27 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
python使用wxpy轻松实现微信防撤回的方法
2019/02/21 Python
如何使用Python 打印各种三角形
2019/06/28 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
Python 合并多个TXT文件并统计词频的实现
2019/08/23 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
django的模型类管理器——数据库操作的封装详解
2020/04/01 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
详解anaconda安装步骤
2020/11/23 Python
详解Python GUI编程之PyQt5入门到实战
2020/12/10 Python
法国亚马逊官方网站:Amazon.fr
2020/12/19 全球购物
交通法规咨询中心工作职责
2013/11/27 职场文书
人事专员职责
2014/02/22 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
罗马假日观后感
2015/06/08 职场文书
导游词之太行山青龙峡
2020/01/14 职场文书