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
<?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
(25-25/146)