-
Notifications
You must be signed in to change notification settings - Fork 0
/
sortable.HTML
80 lines (73 loc) · 2.16 KB
/
sortable.HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Example Page</title>
<link type="text/css" href="./css/redmond/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui-1.7.2.custom.min.js"></script>
<style>
.elm div{border:1px solid red;width:40px;}
.hv {background-color:yellow;}
.av {color:red;}
</style>
<script type="text/javascript">
$(function() {
var data=[];
var rows = [0,1];
var cols = [2,3];
var data_col=4;
for (i=2;i>0;i--)
for (j=0;j<2;j++)
for (k=2;k>0;k--)
for (n=0;n<2;n++)
data.push(['s'+i,'b'+j,'q'+k,'qn'+n,'s'+i+'-b'+j+'-q'+k+'-qn'+n]);
function jpv_initialSort(a,b)
{
//Compare "a" and "b" in some fashion, and return -1, 0, or 1
//Less than 0: Sort "a" to be a lower index than "b"
//Zero: "a" and "b" should be considered equal, and no sorting performed.
//Greater than 0: Sort "b" to be a lower index than "a".
// rows keep idexes of row keys
// cols keep idexes of col keys
//compare by rows order then cols order
//rows=$this.opts.rows;
//cols=$this.opts.cols;
order=[-1,1,1,-1];
for (i=0;i < rows.length;i++)
{
if (a[rows[i]] < b[rows[i]] ) return 1*order[i];
if (a[rows[i]] > b[rows[i]] ) return -1*order[i];
}
for (i=0;i < cols.length;i++)
{
if (a[cols[i]] < b[cols[i]] ) return 1*order[i+rows.length];
if (a[cols[i]] > b[cols[i]] ) return -1*order[i+rows.length];
}
return 0;
}
//console.dir(data)
data.sort(function(a,b) {return jpv_initialSort(a,b)} );
//console.dir(data)
/*
$("#row div").draggable({
helper: 'clone'
,cursor: 'move'
});
$("#col").sortable();
$("#col").droppable({
accept: '#row div'
,activeClass: 'av'
,hoverClass: 'hv'
,drop: function(event, ui) {
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
}
})
*/
});
</script>
</head>
<div class="elm">
<div id="row"><div>1</div><div>2</div></div>
<div id="col"><div>3</div><div>4</div></div>
</div>