今天給大家分享下最近web項(xiàng)目中出現(xiàn)的一個(gè)技術(shù)難點(diǎn)問題――坐標(biāo)排序；
如下圖所示，要求在前端頁面上按順序?qū)⑾旅?個(gè)模塊的坐標(biāo)依次保存至數(shù)據(jù)庫
現(xiàn)在已知信息如下：
1、每個(gè)模塊分別為一個(gè)div
2、每個(gè)div可隨意拖動(dòng)（故拖動(dòng)之后的順序是錯(cuò)亂的）
3、每個(gè)div的坐標(biāo)（css絕對(duì)定位獲得的left、top屬性值）
現(xiàn)在已通過程序?qū)?個(gè)模塊div的坐標(biāo)信息用一個(gè)對(duì)象數(shù)組保存
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為每個(gè)模塊唯一標(biāo)志符（本實(shí)例用于提交數(shù)據(jù)庫）
一、排序思考
1、排序規(guī)則如何制定？
客戶及項(xiàng)目負(fù)責(zé)人沒有具體說明規(guī)則，所以需要由技術(shù)人員按照技術(shù)方面的常規(guī)邏輯進(jìn)行分析。
按照我們理解，上面5個(gè)div的正常情況下的順序應(yīng)該是：從上到下，從左到右
2、排序算法如何實(shí)現(xiàn)？
根據(jù)上面得出的排序規(guī)則，我們需要分別對(duì)兩點(diǎn)的y、x坐標(biāo)分別比較，確定出排序
A、從上到下：坐標(biāo)y越小，越排在前面
B、從左到右：坐標(biāo)x越小，越排在前面
C、優(yōu)先級(jí)為y坐標(biāo)，若y坐標(biāo)相等，則x坐標(biāo)越小，越排在前面
二、代碼實(shí)現(xiàn)
1、兩點(diǎn)比較
我們先定義兩個(gè)坐標(biāo)點(diǎn)，編寫代碼進(jìn)行比較
var p1 = { x: 350, y: 0 };var p2 = { x: 320, y: 0 };console.log(SetSortRule(p1, p2));//兩個(gè)坐標(biāo)比較大小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; }}關(guān)鍵代碼：SetSortRule（p1,p2）
p1,p2分別為需要比較的兩點(diǎn)對(duì)象
這樣一來，我們對(duì)于兩個(gè)點(diǎn)的排序就可以實(shí)現(xiàn)了，接下來就是對(duì)上面對(duì)象數(shù)組中的5個(gè)點(diǎn)進(jìn)行排序。
2、多點(diǎn)比較
我們?cè)賮碛^察下這5個(gè)點(diǎn)構(gòu)成的對(duì)象數(shù)組
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個(gè)點(diǎn)對(duì)象兩兩比較，這里就得用到冒泡排序法
既然是冒泡排序，大家都應(yīng)該挺熟悉的吧，這里就不再細(xì)講，直接上代碼
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為對(duì)象數(shù)組（此實(shí)例為p對(duì)象數(shù)組）
SetSortRule(arry[j],arry[j + 1])，為兩個(gè)點(diǎn)進(jìn)行比較
3、輸出效果
最終輸出結(jié)果如下圖，這里我就用瀏覽器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); } //兩個(gè)坐標(biāo)比較大小 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>以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
