Bug Tracker

Ticket #3271: index.html

File index.html, 2.9 KB (added by kwaping, 13 years ago)

Simple test case. You'll need to point the jquery paths to your own files.

Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2        "http://www.w3.org/TR/html4/loose.dtd">
3<html>
4<head>
5        <title>sortable test</title>
6        <meta name="generator" content="BBEdit 8.7">
7
8<style type="text/css">
9        .clickable              { cursor: pointer; cursor: hand }
10        .with_underline { text-decoration: underline }
11        .draggable              { cursor: move }
12        .draggable_line { cursor: move }
13        .sortable_row   { background-color: lightgreen; }
14        .sortval                { text-align: right; cursor: move; width: 10px }
15        .reg_text               { width: 480px }
16        .sort_helper    { height: 5px; }
17        .bluebg                 { background-color: #00f }
18        .redbg                  { background-color: #f00 }
19        .ghost                  { opacity: 0.5 }
20</style>
21
22<script src="/~ollie/js/jquery-1.2.6.js" type="text/javascript" language="javascript"></script>
23<script src="/~ollie/js/ui/ui.core.js" type="text/javascript" language="javascript"></script>
24<script src="/~ollie/js/ui/ui.sortable.js" type="text/javascript" language="javascript"></script>
25
26<script type="text/javascript" language="javascript">
27
28$(document).ready(function () {
29
30        var relabel = function (e,ui) {
31                $('#teh_body tr.sortable_row').each(function (i) {
32//                      $('#sortval',ui.helper).text($(this).text());
33                        $('#sortval',this).text(i + 1);
34                });
35//              var arr = $(this.rows);
36//              for (var i in arr) {
37//                      $('#sortval',arr[i]).text(i + 1);
38//              }
39//              var rowcount = $('#teh_body tr.sortable_row').length;
40        }
41
42        var update = function (e,ui) {
43                var floater = ui.helper;
44                var ghost = ui.placeholder;
45var x = $('#sortval',floater).text();
46var y = $('#sortval',ghost).text();
47// alert([x,y].join('_'));
48// alert('floater id: '+ x +', ghost id: ' + y);
49//              var i;
50//              var arr = $('#teh_body tr.sortable_row');
51//              var len = arr.length;
52//              for (i = 0; i < arr.length; i++) {
53//                      var row = arr[i];
54//                      $('#sortval',row).text(i + 1);
55//              }
56        }
57
58        $('#teh_body').sortable({
59                containment:    'parent',
60                axis:                   'y',
61                placeholder:    'sort_helper',
62//              beforeStop:             update,
63                handle:                 '#sortval',
64//              start:                  function (e,ui) {
65//                      ui.helper.addClass('ghost');
66//              },
67//              beforeStop:                     function (e,ui) {
68//                      ui.helper.removeClass('ghost');
69//              },
70                update:                 relabel
71        });
72
73});
74
75</script>
76
77</head>
78<body>
79
80<table border="0" cellspacing="5" cellpadding="2" width="500">
81        <thead>
82        <tr bgcolor="darkgreen">
83                <th>id</th>
84                <th>value</th>
85        </tr>
86        </thead>
87        <tbody id="teh_body">
88        <tr class="sortable_row">
89                <td class="sortval" id="sortval">1</td>
90                <td class="reg_text">_Row_1_Cell_2_</td>
91        </tr>
92        <tr class="sortable_row">
93                <td class="sortval" id="sortval">2</td>
94                <td>_Row_2_Cell_2_</td>
95        </tr>
96        <tr class="sortable_row">
97                <td class="sortval" id="sortval">3</td>
98                <td>_Row_3_Cell_2_</td>
99        </tr>
100        <tr class="sortable_row">
101                <td class="sortval" id="sortval">4</td>
102                <td>_Row_4_Cell_2_</td>
103        </tr>
104        <tr class="sortable_row">
105                <td class="sortval" id="sortval">5</td>
106                <td>_Row_5_Cell_2_</td>
107        </tr>
108        </tbody>
109</table>
110
111<!--
112<div class="sort_helper" id="sort_helper"></div>
113 -->
114
115</body>
116</html>