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+Dhtml:WEB程序员简易开发工具包(预先体验版)
Nov 07 Javascript
Json对象与Json字符串互转(4种转换方式)
Mar 27 Javascript
jquery 中ajax执行的优先级
Jun 22 Javascript
纯javascript代码实现计算器功能(三种方法)
Sep 07 Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 Javascript
js实现按钮控制带有停顿效果的图片滚动
Aug 30 Javascript
AngularJS读取JSON及XML文件的方法示例
May 25 Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 Javascript
对layui数据表格动态cols(字段)动态变化详解
Oct 25 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读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
php生成随机数/生成随机字符串的方法小结【5种方法】
2020/05/27 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
初识Node.js
2014/09/03 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
jQuery移动端图片上传组件
2016/06/12 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
js实现自动轮换选项卡
2017/01/13 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
2018/08/12 Javascript
详解如何使用router-link对象方式传递参数?
2019/05/02 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
[01:49]一目了然!DOTA2DotA快捷操作对比第二弹
2014/05/16 DOTA
Python之eval()函数危险性浅析
2014/07/03 Python
Python解惑之整数比较详解
2017/04/24 Python
Python字符串处理实例详解
2017/05/18 Python
Python对列表中的各项进行关联详解
2017/08/15 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
ubuntu16.04制作vim和python3的开发环境
2018/09/23 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
关于Tensorflow使用CPU报错的解决方式
2020/02/05 Python
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
深圳-东方伟业笔试部分
2015/02/11 面试题
学生处主任岗位职责
2013/12/01 职场文书
教师党员思想汇报
2014/01/06 职场文书
挑战杯创业计划书的写作指南
2014/01/07 职场文书
难忘的一课教学反思
2014/04/30 职场文书
个人买房协议书范本
2014/10/06 职场文书
群众路线组织生活会发言材料
2014/10/17 职场文书
幼儿园教师自我评价
2015/03/04 职场文书