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 相关文章推荐
Document对象内容集合(比较全)
Sep 06 Javascript
js鼠标滑过图片震动特效的方法
Feb 17 Javascript
在JavaScript中处理数组之reverse()方法的使用
Jun 09 Javascript
JavaScript图像延迟加载库Echo.js
Apr 05 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
Apr 27 Javascript
bootstrap提示标签、提示框实现代码
Dec 28 Javascript
Vue.js学习教程之列表渲染详解
May 17 Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
Vue注册组件命名时不能用大写的原因浅析
Apr 25 Javascript
react中hook介绍以及使用教程
Dec 11 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新手上路(七)
2006/10/09 PHP
深入理解PHP中的Session和Cookie
2013/06/21 PHP
浅析PHP安装扩展mcrypt以及相关依赖项(PHP安装PECL扩展的方法)
2013/07/05 PHP
如何在php中正确的使用json
2013/08/06 PHP
强制PHP命令行脚本单进程运行的方法
2014/04/15 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
document.getElementById的简写方式(获取id对象的简略写法)
2010/09/10 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
JavaScript中读取和保存文件实例
2014/05/08 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
2014/08/18 Javascript
Javascript基础教程之break和continue语句
2015/01/18 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
修改jquery中dialog的title属性方法(推荐)
2016/08/26 Javascript
仿iframe效果Aajx文件上传实例
2016/11/18 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
2017/08/04 Javascript
vue集成kindeditor富文本的实现示例代码
2019/06/07 Javascript
[45:56]Ti4正赛第一天 VG vs NEWBEE 3
2014/07/19 DOTA
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
python正则表达式中的括号匹配问题
2014/12/14 Python
Django实现的自定义访问日志模块示例
2017/06/23 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
python实现音乐下载器
2018/04/15 Python
Python3实现的Mysql数据库操作封装类
2018/06/06 Python
python中class的定义及使用教程
2019/09/18 Python
使用Python实现 学生学籍管理系统
2019/11/26 Python
h5实现获取用户地理定位的实例代码
2017/07/17 HTML / CSS
台湾百利市购物中心:e-Payless
2017/08/16 全球购物
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
Made in Design意大利:现代家具、名家灯具和装饰
2020/10/27 全球购物
自荐信如何“自荐”
2013/10/24 职场文书
餐厅采购员岗位职责
2014/03/06 职场文书
故意伤害辩护词
2015/05/21 职场文书
人生遥控器观后感
2015/06/11 职场文书
开学典礼致辞
2015/07/29 职场文书