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 window.event对象详尽解析
Feb 17 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
Dec 06 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
Sep 05 Javascript
js中for in的用法示例解析
Dec 25 Javascript
js实现连个数字相加而不是拼接的方法
Feb 23 Javascript
jQuery元素选择器用法实例
Dec 23 Javascript
Bootstrap缩略图的创建方法
Mar 22 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
Sep 14 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
Oct 22 Javascript
浅谈Angular7 项目开发总结
Dec 19 Javascript
Javascript的this详解
Mar 23 Javascript
详解vue v-model
Aug 31 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
在字符串中把网址改成超级链接
2006/10/09 PHP
PHP 使用pcntl和libevent 实现Timer功能
2013/10/27 PHP
php获取汉字首字母的函数
2013/11/07 PHP
php带抄送和密件抄送的邮件发送方法
2015/03/20 PHP
浅析Yii2集成富文本编辑器redactor实例教程
2016/04/25 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
PHP设计模式之模板模式定义与用法详解
2018/12/20 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
JavaScript中的迭代器和生成器详解
2014/10/29 Javascript
jQuery自动添加表单项的方法
2015/07/13 Javascript
使用jQuery监听DOM元素大小变化
2016/02/24 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
使用cropper.js裁剪头像的实例代码
2017/09/29 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
关于layui的动态图标不显示的解决方法
2019/09/04 Javascript
Vue 实现输入框新增搜索历史记录功能
2019/10/15 Javascript
JavaScript实现点击切换验证码及校验
2021/01/10 Javascript
Python random模块(获取随机数)常用方法和使用例子
2014/05/13 Python
Python实现从url中提取域名的几种方法
2014/09/26 Python
Pycharm设置界面全黑的方法
2018/05/23 Python
python实现可变变量名方法详解
2019/07/01 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
Python阶乘求和的代码详解
2020/02/14 Python
纽约香氛品牌:NEST Fragrance
2018/10/15 全球购物
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
私有程序集与共享程序集有什么区别
2013/04/05 面试题
校领导推荐信
2013/11/01 职场文书
平面设计师的工作职责
2013/11/21 职场文书
大客户销售经理职责
2013/12/04 职场文书
综合办公室个人的自我评价
2013/12/22 职场文书
英语老师推荐信
2014/02/26 职场文书
教师演讲稿大全
2014/05/16 职场文书
管理工程专业求职信
2014/08/10 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
舌尖上的中国观后感
2015/06/02 职场文书