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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js获得鼠标的坐标值的方法
复制代码 代码如下: var x , y; //当需求为获得的坐标值相对于body时,用: function positionBody(event){ event = event||window.event; //获得相对于body定位的横标值: x=event.clientX //获得相对于body定位的纵标值: y=event.clientY } //当需求为获得的坐标值相对于某一对象时,用: function positionObj(event,id){ //获得对象相对于页面的横坐标值:
-
JavaScript获取鼠标坐标的函数（兼容IE、FireFox、Chrome）
还好网上什么都有,上网找了一个浏览器兼容性最佳的函数,经测试兼容IE.FireFox.Chrome,并且不会有滚动条误差问题,存档下,以备后用 :) 复制代码 代码如下: function mousePos(e){ var x,y; var e = e||window.event; return { x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,
-
基于JavaScript实现 获取鼠标点击位置坐标的方法
在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊声明代码在IE8,FireFox,Chrome下进行测试兼容 鼠标点击位置坐标相对于屏幕 如果是涉及到鼠标点击确定位置相对比较简单,获取到鼠标点击事件后,事件screenX,screenY获取的是点击位置相对于屏幕的左边距与上边距,不考虑iframe因素,不同浏览器下表现的还算一致. 复制代码 代码
-
js Event对象的5种坐标
但是你懂的,浏览器实在太不和谐了,兼容性且不说,各种坐标属性看得人头昏眼花,极容易混淆.好吧,我来总结一下: 测试浏览器:IE8, Chrome13, FF8, Safari5, Opera11 先上测试用例(用HTML5的doctype测试,也可看出未来的发展趋势,其他doctype可自行测试): 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type"
-
js与jquery中获取当前鼠标的x、y坐标位置的代码
复制代码 代码如下: <div id="testDiv">放在我上面</div> <script type="text/javascript"> $('#testDiv').mousemove(function(e) { var xx = e.originalEvent.x || e.originalEvent.layerX || 0; var yy = e.originalEvent.y || e.originalEvent.l
-
通过百度地图获取公交线路的站点坐标的js代码
最近做百度地图的模拟数据,需要获取某条公交线路沿途站点的坐标信息,貌似百度没有现成的API,因此做了一个模拟页面,工具而已,IE6/7/8不支持 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>获取公交站点坐标</title> <style type="text/css"> html,b
-
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
通过JS得到当前焦点的坐标 如下是得到当前焦点的坐标: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head
-
通过JS 获取Mouse Position(鼠标坐标)的代码
昨天写的脚本在获取鼠标位置的时候有些问题.在IE中始终当有滚动条的时候,发现document.body.scrollTop并没有起到作用.后来在google中搜索到一篇文章Mouse Cursor Position,详细介绍了浏览器鼠标定位的问题.各个浏览器对鼠标定位的标准不一样,就连不通版本的ie对定位支持都不一样.document.body.scrollLeft,document.body.scrollTop只用于IE6以前的版本,在IE6中,对没有宣告 DOCTYPE,或者宣告的是tran
-
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
JavaScript获取鼠标移动时的坐标(兼容:IE8.谷歌.Firefox.Opera ),测试通过 直接复制成html文件,即可运行. 为方便大家测试特准备了一份在线演示 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&quo
-
javascript 事件对象 坐标事件说明
测试浏览器的版本: IETester 6 ,7 IE 8.0 Firefox 3.5.5 Chrome 4.1.249.1064 (45376) Opera 9.64 Safari 4.0 先来看看各个主流浏览器都有哪些坐标属性以及它们的意义 在IE中 event.offsetX event.offsetY 相对于e.srcElement坐标 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标. 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标. event.clientX event