溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下JavaScript實現二維坐標點排序效果的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
今天給大家分享下最近web項目中出現的一個技術難點問題——坐標排序；
如下圖所示，要求在前端頁面上按順序將下面5個模塊的坐標依次保存至數據庫
現在已知信息如下：
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一下了
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實現二維坐標點排序效果的方法”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
