1
|
// ----------------------------------------------------------------------------
|
2
|
// (c) Copyright, DTLink, LLC 1997-2005
|
3
|
// http://www.dtlink.com
|
4
|
//
|
5
|
// DragList - Drag and Drop Ordered Lists
|
6
|
//
|
7
|
// Javascript Support file for formVista <draglist> fvml tag.
|
8
|
//
|
9
|
// For more information please see:
|
10
|
//
|
11
|
// http://www.formvista.com/otherprojects/draglist.html
|
12
|
//
|
13
|
// For questions or comments please contact us at:
|
14
|
//
|
15
|
// http://www.formvista.com/contact.html
|
16
|
//
|
17
|
// LICENSE: This file is governed by the new BSD license. For more information
|
18
|
<?php
|
19
|
/*
|
20
|
The DragList drag and drop ordered lists implementation is available under the terms of the new BSD license.
|
21
|
|
22
|
Copyright (c) 2005, DTLink, LLC
|
23
|
All rights reserved.
|
24
|
|
25
|
Redistribution and use in source and binary forms, with or
|
26
|
without modification, are permitted provided that the following
|
27
|
conditions are met:
|
28
|
|
29
|
* Redistributions of source code must retain the above
|
30
|
copyright notice, this list of conditions and the following
|
31
|
disclaimer.
|
32
|
|
33
|
* Redistributions in binary form must reproduce the above
|
34
|
copyright notice, this list of conditions and the following
|
35
|
disclaimer in the documentation and/or other materials provided
|
36
|
with the distribution.
|
37
|
|
38
|
* Neither the name of DTLink, LLC nor the names of its
|
39
|
contributors may be used to endorse or promote products derived
|
40
|
from this software without specific prior written permission.
|
41
|
|
42
|
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND
|
43
|
CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES,
|
44
|
INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
|
45
|
MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
|
46
|
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR
|
47
|
CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
|
48
|
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT
|
49
|
NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
|
50
|
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
|
51
|
HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
|
52
|
CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
|
53
|
OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,
|
54
|
EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
55
|
*/
|
56
|
?>
|
57
|
//
|
58
|
// REVISION HISTORY:
|
59
|
//
|
60
|
// 2004-11-12 YmL:
|
61
|
// . initial revision.
|
62
|
//
|
63
|
// 2005-05-28 YmL:
|
64
|
// . pulled out of formVista, relicensed and packaged as a standalone implementation.
|
65
|
//
|
66
|
// 2005-06-02 mtmosier:
|
67
|
// . added horizontal dragging support.
|
68
|
//
|
69
|
// ------------------------
|
70
|
|
71
|
/**
|
72
|
* constructor for dragList class
|
73
|
*/
|
74
|
|
75
|
function fv_dragList( name )
|
76
|
{
|
77
|
|
78
|
// name of this dragList. Must match the id of the root DIV tag.
|
79
|
|
80
|
this.dragListRootId = name;
|
81
|
|
82
|
// array of item offsets
|
83
|
|
84
|
this.offsetsX = new Array();
|
85
|
this.offsetsY = new Array();
|
86
|
|
87
|
}
|
88
|
|
89
|
// ----------------------------------------------
|
90
|
|
91
|
/**
|
92
|
* setup the draglist prior to use
|
93
|
*
|
94
|
* @param string orientation defaults to vert. if set to "horz" renders horizontally.
|
95
|
* @param string itemTagName. if null defaults to "div". Can be "span".
|
96
|
*/
|
97
|
|
98
|
fv_dragList.prototype.setup = function( orientation, itemTagName )
|
99
|
{
|
100
|
|
101
|
var horizontal;
|
102
|
|
103
|
if ( orientation == "horz" )
|
104
|
horizontal = true;
|
105
|
else
|
106
|
horizontal = false;
|
107
|
|
108
|
this.listRoot = document.getElementById( this.dragListRootId );
|
109
|
this.listItems = this.getListItems( itemTagName );
|
110
|
|
111
|
for (var i = 0; i < this.listItems.length; i++)
|
112
|
{
|
113
|
|
114
|
if ( this.listItems[i] == undefined )
|
115
|
continue;
|
116
|
|
117
|
if ( horizontal )
|
118
|
{
|
119
|
Drag.init(this.listItems[i], null, null, null, 0, 0);
|
120
|
}
|
121
|
else
|
122
|
{
|
123
|
Drag.init(this.listItems[i], null, 0, 0, null, null);
|
124
|
}
|
125
|
|
126
|
// ---------------------------------------------------
|
127
|
// on drag method
|
128
|
|
129
|
this.listItems[i].onDrag = function( x, y, thisElem )
|
130
|
{
|
131
|
|
132
|
x = thisElem.offsetLeft;
|
133
|
y = thisElem.offsetTop;
|
134
|
|
135
|
// this is a callback from the dom-drag code. From within this
|
136
|
// function "this" does not refer to the fv_draglist function.
|
137
|
|
138
|
draglist = getDragList( thisElem );
|
139
|
|
140
|
draglist.recalcOffsets( itemTagName );
|
141
|
|
142
|
var pos = draglist.getCurrentOffset( thisElem, itemTagName );
|
143
|
|
144
|
//var listItems = this.getListItems( itemTagName );
|
145
|
|
146
|
// if bottom edge is below top of lower item.
|
147
|
|
148
|
var testMoveUp;
|
149
|
var testMoveDown;
|
150
|
if ( horizontal )
|
151
|
{
|
152
|
testMoveUp = (x + draglist.getDivWidth(thisElem) > draglist.offsetsX[pos + 1] + draglist.getDivWidth( draglist.listItems[pos + 1] ));
|
153
|
testMoveDown = x < draglist.offsetsX[pos - 1];
|
154
|
}
|
155
|
else
|
156
|
{
|
157
|
testMoveUp = (y + draglist.getDivHeight(thisElem) > draglist.offsetsY[pos + 1] + draglist.getDivHeight( draglist.listItems[pos + 1] ));
|
158
|
testMoveDown = y < draglist.offsetsY[pos - 1];
|
159
|
}
|
160
|
|
161
|
if (( pos != draglist.listItems.length - 1) && testMoveUp )
|
162
|
{
|
163
|
draglist.listRoot.removeChild(thisElem);
|
164
|
|
165
|
if ( pos + 1 == draglist.listItems.length )
|
166
|
{
|
167
|
draglist.listRoot.appendChild( thisElem );
|
168
|
}
|
169
|
else
|
170
|
{
|
171
|
draglist.listRoot.insertBefore(thisElem, draglist.listItems[pos+1]);
|
172
|
}
|
173
|
|
174
|
thisElem.style["top"] = "0px";
|
175
|
thisElem.style["left"] = "0px";
|
176
|
}
|
177
|
else if ( pos != 0 && testMoveDown )
|
178
|
{
|
179
|
draglist.listRoot.removeChild(thisElem);
|
180
|
draglist.listRoot.insertBefore(thisElem, draglist.listItems[pos-1]);
|
181
|
thisElem.style["top"] = "0px";
|
182
|
thisElem.style["left"] = "0px";
|
183
|
}
|
184
|
|
185
|
};
|
186
|
|
187
|
this.listItems[i].onDragEnd = function(x,y,thisElem)
|
188
|
{
|
189
|
thisElem.style["top"] = "0px";
|
190
|
thisElem.style["left"] = "0px";
|
191
|
}
|
192
|
|
193
|
} // end of for loop.
|
194
|
|
195
|
this.recalcOffsets( itemTagName );
|
196
|
|
197
|
} // end of setup.
|
198
|
|
199
|
// ----------------------------------------------
|
200
|
|
201
|
|
202
|
/**
|
203
|
* update the order value fields and submit the form.
|
204
|
*/
|
205
|
|
206
|
fv_dragList.prototype.do_submit = function( formName, dragListRootId )
|
207
|
{
|
208
|
|
209
|
var listOrderItems = this.listRoot.getElementsByTagName("input");
|
210
|
|
211
|
for (var i = 0; i < listOrderItems.length; i++)
|
212
|
{
|
213
|
listOrderItems[i].value = i;
|
214
|
}
|
215
|
|
216
|
expr = "document." + formName + ".submit()";
|
217
|
|
218
|
eval( expr );
|
219
|
}
|
220
|
|
221
|
// ----------------------------------------------
|
222
|
// "Private" methods.
|
223
|
// ----------------------------------------------
|
224
|
|
225
|
fv_dragList.prototype.recalcOffsets = function( itemTagName )
|
226
|
{
|
227
|
var listItems = this.getListItems( itemTagName );
|
228
|
|
229
|
for (var i = 0; i < listItems.length; i++)
|
230
|
{
|
231
|
this.offsetsX[i] = listItems[i].offsetLeft;
|
232
|
this.offsetsY[i] = listItems[i].offsetTop;
|
233
|
}
|
234
|
}
|
235
|
|
236
|
fv_dragList.prototype.getCurrentOffset = function(elem, itemTagName)
|
237
|
{
|
238
|
var listItems = this.getListItems( itemTagName );
|
239
|
|
240
|
for (var i = 0; i < listItems.length; i++)
|
241
|
{
|
242
|
if (listItems[i] == elem)
|
243
|
{
|
244
|
return i;
|
245
|
}
|
246
|
}
|
247
|
}
|
248
|
|
249
|
fv_dragList.prototype.getDivWidth = function(elem)
|
250
|
{
|
251
|
|
252
|
if (( elem == undefined) || ( elem.offsetWidth == undefined ))
|
253
|
return( 0 );
|
254
|
|
255
|
value = elem.offsetWidth;
|
256
|
if (isNaN(value))
|
257
|
{
|
258
|
value = 0;
|
259
|
}
|
260
|
|
261
|
return( value );
|
262
|
}
|
263
|
|
264
|
fv_dragList.prototype.getDivHeight = function(elem)
|
265
|
{
|
266
|
|
267
|
if (( elem == undefined) || ( elem.offsetHeight == undefined ))
|
268
|
return( 0 );
|
269
|
|
270
|
value = elem.offsetHeight;
|
271
|
if (isNaN(value))
|
272
|
{
|
273
|
value = 25;
|
274
|
}
|
275
|
|
276
|
return( value );
|
277
|
}
|
278
|
|
279
|
/**
|
280
|
* return list of draggable items
|
281
|
*/
|
282
|
|
283
|
fv_dragList.prototype.getListItems = function( itemTagName )
|
284
|
{
|
285
|
if ( itemTagName == undefined )
|
286
|
{
|
287
|
itemTagName = "div";
|
288
|
}
|
289
|
|
290
|
var listItems = this.listRoot.getElementsByTagName( itemTagName );
|
291
|
|
292
|
return( listItems );
|
293
|
}
|
294
|
|
295
|
// end of draglist class definition.
|
296
|
|
297
|
// -------------------------------------
|
298
|
|
299
|
/**
|
300
|
* add a new dragList to the list of draglists on this page
|
301
|
*
|
302
|
* This implementatoin supports multiple managed draglists on
|
303
|
* a single page. The index is contained in a global dragListIndex
|
304
|
* array that must be declared in the page.
|
305
|
*/
|
306
|
|
307
|
function addDragList( draglist )
|
308
|
{
|
309
|
dragListIndex[ draglist.dragListRootId ] = draglist;
|
310
|
}
|
311
|
|
312
|
// -------------------------------------------------------
|
313
|
|
314
|
/**
|
315
|
* given a draggable div element, return the draglist it belongs to
|
316
|
*
|
317
|
* @see fv_draglist.prototype.setup
|
318
|
* @todo this should probably be a method inside the draglist class.
|
319
|
*/
|
320
|
|
321
|
function getDragList( elem )
|
322
|
{
|
323
|
|
324
|
// given a list item return the drag list it belongs to.
|
325
|
|
326
|
var draglistContainer = elem.parentNode;
|
327
|
|
328
|
var draglist = dragListIndex[ draglistContainer.id ];
|
329
|
|
330
|
return( draglist );
|
331
|
}
|
332
|
|
333
|
// END
|