Project

General

Profile

Download (8.31 KB) Statistics
| Branch: | Tag: | Revision:
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
/*
19
    The DragList drag and drop ordered lists implementation is available under the terms of the new BSD license.
20
   
21
   Copyright (c) 2005, DTLink, LLC
22
   All rights reserved.
23
                                                                                  
24
   Redistribution  and  use  in  source  and binary forms, with or
25
   without modification, are permitted provided that the following
26
   conditions are met:
27
                                                                                  
28
   *   Redistributions  of  source  code  must  retain  the  above
29
   copyright  notice,  this  list  of conditions and the following
30
   disclaimer.
31
                                                                                  
32
   *  Redistributions  in  binary  form  must  reproduce the above
33
   copyright  notice,  this  list  of conditions and the following
34
   disclaimer in the documentation and/or other materials provided
35
   with the distribution.
36
    
37
   *  Neither  the  name  of  DTLink,  LLC  nor  the  names of its
38
   contributors may be used to endorse or promote products derived
39
   from this software without specific prior written permission.
40
    
41
   THIS   SOFTWARE  IS  PROVIDED  BY  THE  COPYRIGHT  HOLDERS  AND
42
   CONTRIBUTORS  "AS  IS"  AND  ANY EXPRESS OR IMPLIED WARRANTIES,
43
   INCLUDING,  BUT  NOT  LIMITED  TO,  THE  IMPLIED  WARRANTIES OF
44
   MERCHANTABILITY  AND  FITNESS  FOR  A  PARTICULAR  PURPOSE  ARE
45
   DISCLAIMED.   IN   NO   EVENT  SHALL  THE  COPYRIGHT  OWNER  OR
46
   CONTRIBUTORS  BE  LIABLE  FOR ANY DIRECT, INDIRECT, INCIDENTAL,
47
   SPECIAL,  EXEMPLARY,  OR  CONSEQUENTIAL DAMAGES (INCLUDING, BUT
48
   NOT  LIMITED  TO,  PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
49
   LOSS  OF  USE,  DATA,  OR  PROFITS;  OR  BUSINESS INTERRUPTION)
50
   HOWEVER  CAUSED  AND  ON  ANY  THEORY  OF LIABILITY, WHETHER IN
51
   CONTRACT,  STRICT  LIABILITY,  OR TORT (INCLUDING NEGLIGENCE OR
52
   OTHERWISE)  ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,
53
   EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
54
*/
55
//
56
// REVISION HISTORY:
57
//
58
// 2004-11-12 YmL:
59
//	.	initial revision.
60
//
61
// 2005-05-28 YmL:
62
//	.	pulled out of formVista, relicensed and packaged as a standalone implementation.
63
//
64
// 2005-06-02 mtmosier:
65
//	.	added horizontal dragging support.
66
//
67
// ------------------------
68

    
69
/**
70
* constructor for dragList class
71
*/
72

    
73
function fv_dragList( name )
74
	{
75

    
76
	// name of this dragList. Must match the id of the root DIV tag.
77

    
78
	this.dragListRootId = name;
79

    
80
	// array of item offsets
81

    
82
	this.offsetsX = new Array();
83
	this.offsetsY = new Array();
84

    
85
	}
86

    
87
// ----------------------------------------------
88

    
89
/**
90
* setup the draglist prior to use
91
*
92
* @param string orientation defaults to vert. if set to "horz" renders horizontally.
93
* @param string itemTagName. if null defaults to "div". Can be "span".
94
*/
95

    
96
fv_dragList.prototype.setup = function( orientation, itemTagName )
97
	{
98

    
99
	var horizontal;
100

    
101
	if ( orientation == "horz" )
102
		horizontal = true;
103
	else
104
		horizontal = false;
105

    
106
	this.listRoot = document.getElementById( this.dragListRootId );
107
	this.listItems = this.getListItems( itemTagName );
108

    
109
	for (var i = 0; i < this.listItems.length; i++) 
110
		{
111

    
112
		if ( this.listItems[i] == undefined )
113
			continue;
114

    
115
		if ( horizontal )
116
			{
117
			Drag.init(this.listItems[i], null, null, null, 0, 0);
118
			}
119
		else
120
			{
121
			Drag.init(this.listItems[i], null, 0, 0, null, null);
122
			}
123

    
124
		// ---------------------------------------------------
125
		// on drag method
126

    
127
		this.listItems[i].onDrag = function( x, y, thisElem ) 
128
			{
129

    
130
			x = thisElem.offsetLeft;
131
			y = thisElem.offsetTop;
132

    
133
			// this is a callback from the dom-drag code. From within this
134
			// function "this" does not refer to the fv_draglist function.
135

    
136
			draglist = getDragList( thisElem );
137

    
138
			draglist.recalcOffsets( itemTagName );
139

    
140
			var pos = draglist.getCurrentOffset( thisElem, itemTagName );
141

    
142
			//var listItems = this.getListItems( itemTagName );
143

    
144
			// if bottom edge is below top of lower item.
145

    
146
			var testMoveUp;
147
			var testMoveDown;
148
			if ( horizontal )
149
				{
150
				testMoveUp = (x + draglist.getDivWidth(thisElem) > draglist.offsetsX[pos + 1] + draglist.getDivWidth( draglist.listItems[pos + 1] ));
151
				testMoveDown = x < draglist.offsetsX[pos - 1];
152
				}
153
			else
154
				{
155
				testMoveUp = (y + draglist.getDivHeight(thisElem) > draglist.offsetsY[pos + 1] + draglist.getDivHeight( draglist.listItems[pos + 1] ));
156
				testMoveDown = y < draglist.offsetsY[pos - 1];
157
				}
158

    
159
			if (( pos != draglist.listItems.length - 1) && testMoveUp )
160
				{ 
161
				draglist.listRoot.removeChild(thisElem);
162

    
163
				if ( pos + 1 == draglist.listItems.length )
164
					{
165
					draglist.listRoot.appendChild( thisElem );
166
					}
167
				else
168
					{
169
					draglist.listRoot.insertBefore(thisElem, draglist.listItems[pos+1]);
170
					}
171

    
172
				thisElem.style["top"] = "0px";
173
				thisElem.style["left"] = "0px";
174
				}
175
			else if ( pos != 0 && testMoveDown ) 
176
				{ 
177
				draglist.listRoot.removeChild(thisElem);
178
				draglist.listRoot.insertBefore(thisElem, draglist.listItems[pos-1]);
179
				thisElem.style["top"] = "0px";
180
				thisElem.style["left"] = "0px";
181
				}
182

    
183
			};
184

    
185
		this.listItems[i].onDragEnd = function(x,y,thisElem) 
186
			{
187
			thisElem.style["top"] = "0px";
188
			thisElem.style["left"] = "0px";
189
			};
190

    
191
		}	// end of for loop.
192

    
193
	this.recalcOffsets( itemTagName );
194

    
195
	};	// end of setup.
196

    
197
// ----------------------------------------------
198

    
199

    
200
/**
201
* update the order value fields and submit the form.
202
*/
203

    
204
fv_dragList.prototype.do_submit = function( formName, dragListRootId )
205
	{
206

    
207
	var listOrderItems = this.listRoot.getElementsByTagName("input");
208

    
209
	for (var i = 0; i < listOrderItems.length; i++) 
210
		{
211
		listOrderItems[i].value = i;
212
		}
213

    
214
	expr = "document." + formName + ".submit()";
215

    
216
	eval( expr );
217
	};
218

    
219
// ----------------------------------------------
220
// "Private" methods.
221
// ----------------------------------------------
222

    
223
fv_dragList.prototype.recalcOffsets = function( itemTagName ) 
224
	{
225
	var listItems = this.getListItems( itemTagName );
226

    
227
	for (var i = 0; i < listItems.length; i++) 
228
		{
229
		this.offsetsX[i] = listItems[i].offsetLeft;
230
		this.offsetsY[i] = listItems[i].offsetTop;
231
		}
232
	};
233

    
234
fv_dragList.prototype.getCurrentOffset = function(elem, itemTagName) 
235
	{ 
236
	var listItems = this.getListItems( itemTagName );
237

    
238
	for (var i = 0; i < listItems.length; i++) 
239
		{
240
		if (listItems[i] == elem) 
241
			{ 
242
			return i;
243
			}
244
		}
245
	};
246

    
247
fv_dragList.prototype.getDivWidth = function(elem) 								  
248
	{
249

    
250
	if (( elem == undefined) || ( elem.offsetWidth == undefined ))
251
		return( 0 );
252

    
253
	value = elem.offsetWidth;
254
	if (isNaN(value))
255
		{
256
		value = 0;
257
		}
258

    
259
	return( value );
260
	};
261

    
262
fv_dragList.prototype.getDivHeight = function(elem) 
263
	{
264

    
265
	if (( elem == undefined) || ( elem.offsetHeight == undefined ))
266
		return( 0 );
267

    
268
	value = elem.offsetHeight;
269
	if (isNaN(value))
270
		{
271
		value = 25;
272
		}
273

    
274
	return( value );
275
	};
276

    
277
/**
278
* return list of draggable items
279
*/
280

    
281
fv_dragList.prototype.getListItems = function( itemTagName )
282
	{
283
	if ( itemTagName == undefined )
284
		{
285
		itemTagName = "div";
286
		}
287

    
288
	var listItems = this.listRoot.getElementsByTagName( itemTagName );
289

    
290
	return( listItems );
291
	};
292

    
293
// end of draglist class definition.
294

    
295
// -------------------------------------
296

    
297
/**
298
* add a new dragList to the list of draglists on this page
299
*
300
* This implementatoin supports multiple managed draglists on
301
* a single page. The index is contained in a global dragListIndex
302
* array that must be declared in the page.
303
*/
304

    
305
function addDragList( draglist )
306
	{
307
	dragListIndex[ draglist.dragListRootId ] = draglist;
308
	}
309

    
310
// -------------------------------------------------------
311

    
312
/**
313
* given a draggable div element, return the draglist it belongs to
314
*
315
* @see fv_draglist.prototype.setup
316
* @todo this should probably be a method inside the draglist class.
317
*/
318

    
319
function getDragList( elem )
320
	{
321

    
322
	// given a list item return the drag list it belongs to.
323

    
324
	var draglistContainer = elem.parentNode;
325

    
326
	var draglist = dragListIndex[ draglistContainer.id ];
327

    
328
	return( draglist );
329
	}
330

    
331
// END
(31-31/186)