JavaScript实现二维坐标点的排序效果

今天给大家分享一个最近网页项目中的技术难点，——坐标排序；

如下图所示，需要在首页将以下五个模块的坐标依次保存到数据库中

现在已知的信息如下：

1.每个模块都是一个div

2.每个div都可以随意拖动(这样拖动后的顺序就乱了)

3.每个div的坐标(通过css绝对定位获得的左侧和顶部属性值)

现在，五个模块的坐标信息已经通过程序用一个对象数组保存

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

一、整理思维

1.如何制定排序规则？

客户和项目负责人没有规定规则，需要技术人员按照常规的技术逻辑进行分析。

根据我们的理解，以上五个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))；//比较两个坐标函数setsortule (P1，p2) {if (P1)的大小。y p2。y){返回true} else if(P1 . y==p2 . y){ return(P1 . x p2 . x)；} else { return false}}键码：setsortule (P1，p2)

P1和p2分别是要比较的两个对象

这样，我们可以对这两点进行排序，然后对上面对象数组中的五点进行排序。

2、多点比较

让我们看看由这五个点组成的对象数组

var p=[{ id: 184，x: 0，y: 0 }，{ id: 185，x: 320，Y : 0 0 }，{ ID 3: 186，x: 30，y: 60 }，{ ID 3: 187，x: 150，Y : 120}，{ ID 3: 180

既然是泡泡排序，大家应该都很熟悉。这里不赘述，直接编码就行了

函数setsort point(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对象数组)setsortule (arry [j]，arry[j ^ 1])，用于比较两点

3.输出效应

最终输出如下。我将在这里使用浏览器控制台

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脚本类型=' text/JavaScript ' var p=[{ id : 184，x: 0，y : 0 0 }，{ id: 185，x: 320，y : 0 0 }，{ id: 186，x: 30，y: 60 }，{ id: 187，x 33333336函数setsort point(arry){ var len=arry。长度；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；} } }控制台。日志(arry)；} //两个坐标比较大小函数SetSortRule(p1，p2){ if(P1。y p2。y){返回true} else if(P1。y==p2。y){返回(P1。x p2。x)；} else {返回false} }/脚本/正文/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。