JavaScript实现二维坐标点排序效果的方法-创新互联

小编给大家分享一下JavaScript实现二维坐标点排序效果的方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

在洛浦等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供网站制作、成都网站建设 网站设计制作按需定制网站,公司网站建设,企业网站建设,品牌网站设计,全网营销推广,外贸营销网站建设,洛浦网站建设费用合理。

今天给大家分享下最近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实现二维坐标点排序效果的方法”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联网站建设公司行业资讯频道！

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网站名称：JavaScript实现二维坐标点排序效果的方法-创新互联
本文地址：https://www.cdcxhl.com/article26/dphpjg.html

成都网站建设公司_创新互联，为您提供品牌网站制作、网站制作、ChatGPT、网站维护、服务器托管、网站导航

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

外贸网站制作

品牌网站设计知识

分类信息网站