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中获取数据库中的值的方法
Jul 14 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
Jan 02 Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 Javascript
html5+javascript实现简单上传的注意细节
Apr 18 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 Javascript
jquery插件ContextMenu设置右键菜单
Mar 13 Javascript
js实现指定时间倒计时效果
Aug 26 Javascript
jsonp格式前端发送和后台接受写法的代码详解
Nov 07 Javascript
jQuery 动画与停止动画效果实例详解
May 19 jQuery
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 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
一个更简单的无限级分类菜单代码
2007/01/16 PHP
深入php常用函数的使用汇总
2013/06/08 PHP
解析PHP无限级分类方法及代码
2013/06/21 PHP
PHP Streams(流)详细介绍及使用
2015/05/12 PHP
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
thinkPHP5.1框架使用SemanticUI实现分页功能示例
2019/08/03 PHP
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
webpack+vue.js实现组件化详解
2016/10/12 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
2017/03/10 Javascript
垃圾回收器的相关知识点总结
2018/05/13 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
Python 中pandas.read_excel详细介绍
2017/06/23 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
Python脚本利用adb进行手机控制的方法
2019/07/08 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
python利用openpyxl拆分多个工作表的工作簿的方法
2019/09/27 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
python实现跨excel sheet复制代码实例
2020/03/03 Python
python的pip有什么用
2020/06/17 Python
爱尔兰领先的在线体育用品零售商:theGAAstore
2018/04/16 全球购物
性能测试工程师的面试题
2015/02/20 面试题
50岁生日感言
2014/01/23 职场文书
公务员政审个人鉴定
2014/02/25 职场文书
舞蹈教育学专业求职信
2014/06/29 职场文书
党员民主评议总结
2014/10/20 职场文书
酒会邀请函
2015/01/31 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
离婚起诉书范本
2015/05/18 职场文书
话题作文之财富(600字)
2019/12/03 职场文书
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA
java版 简单三子棋游戏
2022/05/04 Java/Android
蓝牙耳机怎么连接电脑win11? Win11蓝牙耳机连接电脑的技巧
2023/01/09 数码科技