fx.DragListGroup Extends goog.events.EventTarget
A class representing a group of one or more "drag lists" with items that can be dragged within them and between them. Example usage: var dragListGroup = new goog.fx.DragListGroup(); dragListGroup.setDragItemHandleHoverClass(className1, className2); dragListGroup.setDraggerElClass(className3); dragListGroup.addDragList(vertList, goog.fx.DragListDirection.DOWN); dragListGroup.addDragList(horizList, goog.fx.DragListDirection.RIGHT); dragListGroup.init();

Inheritance

Constructor

goog.fx.DragListGroup()

Instance Methods

Public Protected Private
addDragList(dragListElementgrowthDirectionopt_unusedopt_dragHoverClass)
Adds a drag list to this DragListGroup. All calls to this method must happen before the call to init(). Remember that all child nodes (except text nodes) will be made draggable to any other drag list in this group.
Arguments:
dragListElement : Element
Must be a container for a list of items that should all be made draggable.
growthDirection : goog.fx.DragListDirection
The direction that this drag list grows in (i.e. if an item is appended to the DOM, the list's bounding box expands in this direction).
opt_unused : boolean=
Unused argument.
opt_dragHoverClass : string=
CSS class to apply to this drag list when the draggerEl hovers over it during a drag action. If present, must be a single, valid classname (not a string of space-separated classnames).
code »
addItemToDragList(listitemopt_index)
Adds a single item to the given drag list and sets up the drag listeners for it. If opt_index is specified the item is inserted at this index, otherwise the item is added as the last child of the list.
Arguments:
list : !Element
The drag list where to add item to.
item : !Element
The new element to add.
opt_index : number=
Index where to insert the item in the list. If not specified item is inserted as the last child of list.
code »
cleanupDragDom_()
Cleans up DOM changes that are made by the handleDrag* methods.
code »
cleanup_(opt_e)
Clear all our temporary fields that are only defined while dragging, and all the bounds info stored on the drag lists and drag elements.
Arguments:
opt_e : !goog.events.Event=
EARLY_CANCEL event from the dragger if cleanup_ was called as an event handler.
code »
cloneNode_(sourceEl) !Element
Use goog.fx.Dragger.cloneNode(). Creates copy of node being dragged.
Arguments:
sourceEl : Element
Element to copy.
Returns: !Element  The clone of sourceEl.
code »
createDragElementInternal(sourceEl) !Element
Generates an element to follow the cursor during dragging, given a drag source element. The default behavior is simply to clone the source element, but this may be overridden in subclasses. This method is called by createDragElement() before the drag class is added.
Arguments:
sourceEl : Element
Drag source element.
Returns: !Element  The new drag element.
code »
disposeInternal()
No description.
code »
getHandleForDragItem_(dragItem) Element
Default implementation of the function to get the "handle" element for a drag item. By default, we use the whole drag item as the handle. Users can change this by calling setFunctionToGetHandleForDragItem().
Arguments:
dragItem : Element
The drag item to get the handle for.
Returns: Element  The dragItem element itself.
code »
getHoverDragList_(draggerElCenter) Element
Helper for handleDragMove_(). Given the position of the center of the dragger element, figures out whether it's currently hovering over any of the drag lists.
Arguments:
draggerElCenter : goog.math.Coordinate
The center position of the dragger element.
Returns: Element  If currently hovering over a drag list, returns the drag list element. Else returns null.
code »
getHoverNextItem_(hoverListdraggerElCenter) Element
Helper for handleDragMove_(). Given the position of the center of the dragger element, plus the drag list that it's currently hovering over, figures out the next drag item in the list that follows the current position of the dragger element. (I.e. if the drag action ends right now, it would become the item after the current drag item.)
Arguments:
hoverList : Element
The drag list that we're hovering over.
draggerElCenter : goog.math.Coordinate
The center position of the dragger element.
Returns: Element  Returns the earliest item in the hover list that belongs after the current position of the dragger element. If all items in the list should come before the current drag item, then returns null.
code »
getHysteresis() number
No description.
Returns: number  distance The number of pixels after which a mousedown and move is considered a drag.
code »
handleDragEnd_(dragEvent) boolean
Handles the end or the cancellation of a drag action, i.e. END or CLEANUP event fired by the dragger.
Arguments:
dragEvent : !goog.fx.DragEvent
Event object fired by the dragger.
Returns: boolean  Whether the event was handled.
code »
handleDragItemHandleMouseout_(e)
Handles a MOUSEOUT event fired on the handle element of a drag item.
Arguments:
e : goog.events.BrowserEvent
The event.
code »
handleDragItemHandleMouseover_(e)
Handles a MOUSEOVER event fired on the handle element of a drag item.
Arguments:
e : goog.events.BrowserEvent
The event.
code »
handleDragItemMouseout_(e)
Handles a MOUSEOUT event fired on a drag item.
Arguments:
e : goog.events.BrowserEvent
The event.
code »
handleDragItemMouseover_(e)
Handles a MOUSEOVER event fired on a drag item.
Arguments:
e : goog.events.BrowserEvent
The event.
code »
handleDragMove_(dragEvent) boolean
Handles a drag movement (i.e. DRAG event fired by the dragger).
Arguments:
dragEvent : goog.fx.DragEvent
Event object fired by the dragger.
Returns: boolean  The return value for the event.
code »
handleDragStart_(e)
Handles the start of a drag action.
Arguments:
e : !goog.fx.DragEvent
goog.fx.Dragger.EventType.START event.
code »
handlePotentialDragStart_(e)
Handles mouse and touch events which may start a drag action.
Arguments:
e : !goog.events.BrowserEvent
MOUSEDOWN or TOUCHSTART event.
code »
init()
Performs the initial setup to make all items in all lists draggable.
code »
insertCurrDragItem_(hoverListhoverNextItem)
Inserts the current drag item to the appropriate location in the drag list that we're hovering over (if the current drag item is not already there).
Arguments:
hoverList : Element
The drag list we're hovering over.
hoverNextItem : Element
The next item in the hover drag list.
code »
insertCurrHoverItem()
Inserts the currently dragged item in its new place. This method is used for insertion only when updateWhileDragging_ is false (otherwise there is no need for that). In the basic implementation the element is inserted before the currently hovered over item (this can be changed by overriding the method in subclasses).
code »
isInRect_(posrect) boolean
Checks whether a coordinate position resides inside a rectangle.
Arguments:
pos : goog.math.Coordinate
The coordinate position.
rect : goog.math.Rect
The rectangle.
Returns: boolean  True if 'pos' is within the bounds of 'rect'.
code »
listenForDragEvents(dragItem)
Listens for drag events on the given drag item. This method is currently used to initialize drag items.
Arguments:
dragItem : Element
the element to initialize. This element has to be in one of the drag lists.
code »
recacheListAndItemBounds_(currDragItem)
Caches the heights of each drag list and drag item, except for the current drag item.
Arguments:
currDragItem : Element
The item currently being dragged.
code »
setCurrDragItemClass(var_args)
Sets a user-supplied CSS class to add to the current drag item (during a drag action). If not set, the default behavior adds visibility:hidden to the current drag item so that it is a block of empty space in the hover drag list (if any). If this class is set by the user, then the default behavior does not happen (unless, of course, the class also contains visibility:hidden).
Arguments:
var_args : ...!string
The CSS class or classes.
code »
setDragItemHandleHoverClass(var_args)
Sets a user-supplied CSS class to add to a drag item handle on hover (not during a drag action).
Arguments:
var_args : ...!string
The CSS class or classes.
code »
setDragItemHoverClass(var_args)
Sets a user-supplied CSS class to add to a drag item on hover (not during a drag action).
Arguments:
var_args : ...!string
The CSS class or classes.
code »
setDraggerElClass(draggerElClass)
Sets a user-supplied CSS class to add to the clone of the current drag item that's actually being dragged around (during a drag action).
Arguments:
draggerElClass : string
The CSS class.
code »
setFunctionToGetHandleForDragItem(getHandleForDragItemFn)
Sets a user-supplied function used to get the "handle" element for a drag item. The function must accept exactly one argument. The argument may be any drag item element. If not set, the default implementation uses the whole drag item as the handle.
Arguments:
getHandleForDragItemFn : function(Element): Element
A function that, given any drag item, returns a reference to its "handle" element (which may be the drag item element itself).
code »
setHysteresis(distance)
Sets the distance the user has to drag the element before a drag operation is started.
Arguments:
distance : number
The number of pixels after which a mousedown and move is considered a drag.
code »
setIsCurrDragItemAlwaysDisplayed()
Sets the property of the currDragItem that it is always displayed in the list.
code »
setNoUpdateWhileDragging()
Sets the private property updateWhileDragging_ to false. This disables the update of the position of the currDragItem while dragging. It will only be placed to its new location once the drag ends.
code »
updateCurrHoverItem(hoverNextItemopt_draggerElCenter)
Updates the value of currHoverItem_. This method is used for insertion only when updateWhileDragging_ is false. The below implementation is the basic one. This method can be extended by a subclass to support changes to hovered item (eg: highlighting). Parametr opt_draggerElCenter can be used for more sophisticated effects.
Arguments:
hoverNextItem : Element
element of the list that is hovered over.
opt_draggerElCenter : goog.math.Coordinate=
current position of the dragged element.
code »
addEventListener(typeopt_captureopt_handlerScope)
Use #listen instead, when possible. Otherwise, use goog.events.listen if you are passing Object (instead of Function) as handler. Adds an event listener to the event target. The same handler can only be added once per the type. Even if you add the same handler multiple times using the same type then it will only be called once when the event is dispatched.
Arguments:
type : string
The type of the event to listen for.
: ?function():? | ?{handleEvent:function():?
No description.
opt_capture : boolean=
In DOM-compliant browsers, this determines whether the listener is fired during the capture or bubble phase of the event.
opt_handlerScope : Object=
Object in whose scope to call the listener.
code »
assertInitialized_()
Asserts that the event target instance is initialized properly.
code »
dispatchEvent()
No description.
code »
disposeInternal()
Removes listeners from this object. Classes that extend EventTarget may need to override this method in order to remove references to DOM Elements and additional listeners.
code »
fireListeners()
No description.
code »
getListener()
No description.
code »
getListeners()
No description.
code »
getParentEventTarget() goog.events.EventTarget
Returns the parent of this event target to use for bubbling.
Returns: goog.events.EventTarget  The parent EventTarget or null if there is no parent.
code »
hasListener()
No description.
code »
listen()
No description.
code »
listenOnce()
No description.
code »
removeAllListeners()
No description.
code »
removeEventListener(typeopt_captureopt_handlerScope)
Use #unlisten instead, when possible. Otherwise, use goog.events.unlisten if you are passing Object (instead of Function) as handler. Removes an event listener from the event target. The handler must be the same object as the one added. If the handler has not been added then nothing is done.
Arguments:
type : string
The type of the event to listen for.
: ?function():? | ?{handleEvent:function():?
No description.
opt_capture : boolean=
In DOM-compliant browsers, this determines whether the listener is fired during the capture or bubble phase of the event.
opt_handlerScope : Object=
Object in whose scope to call the listener.
code »
setParentEventTarget(parent)
Sets the parent of this event target to use for capture/bubble mechanism.
Arguments:
parent : goog.events.EventTarget
Parent listenable (null if none).
code »
setTargetForTesting(target)
Sets the target to be used for event.target when firing event. Mainly used for testing. For example, see goog.testing.events.mixinListenable.
Arguments:
target : !Object
The target.
code »
unlisten()
No description.
code »
unlistenByKey()
No description.
code »
addOnDisposeCallback(callbackopt_scope)
Invokes a callback function when this object is disposed. Callbacks are invoked in the order in which they were added.
Arguments:
callback : function(this:T):?
The callback function.
opt_scope : T=
An optional scope to call the callback in.
code »
dispose() void
Disposes of the object. If the object hasn't already been disposed of, calls #disposeInternal. Classes that extend goog.Disposable should override #disposeInternal in order to delete references to COM objects, DOM nodes, and other disposable objects. Reentrant.
Returns: void  Nothing.
code »
disposeInternal()
Deletes or nulls out any references to COM objects, DOM nodes, or other disposable objects. Classes that extend goog.Disposable should override this method. Not reentrant. To avoid calling it twice, it must only be called from the subclass' disposeInternal method. Everywhere else the public dispose method must be used. For example:
  mypackage.MyClass = function() {
    mypackage.MyClass.base(this, 'constructor');
    // Constructor logic specific to MyClass.
    ...
  };
  goog.inherits(mypackage.MyClass, goog.Disposable);

  mypackage.MyClass.prototype.disposeInternal = function() {
    // Dispose logic specific to MyClass.
    ...
    // Call superclass's disposeInternal at the end of the subclass's, like
    // in C++, to avoid hard-to-catch issues.
    mypackage.MyClass.base(this, 'disposeInternal');
  };
code »
getDisposed() boolean
Use #isDisposed instead. No description.
Returns: boolean  Whether the object has been disposed of.
code »
isDisposed() boolean
No description.
Returns: boolean  Whether the object has been disposed of.
code »
registerDisposable(disposable)
Associates a disposable object with this object so that they will be disposed together.
Arguments:
disposable : goog.disposable.IDisposable
that will be disposed when this object is disposed.
code »

Instance Properties

constructor :
No description.
Code »
currDragItemClasses_ :
The user-supplied CSS classes to add to the current drag item (during a drag action).
Code »
currDragItem_ :
The current drag item being moved. Note: This is only defined while a drag action is happening.
Code »
currHoverItem_ :
The current item in the list we are hovering over. We need to remember this in case we do not update the position of the current drag item while dragging (see updateWhileDragging_). In this case the current drag item will be inserted into the list before this element when the drag ends.
Code »
currHoverList_ :
The drag list that this.currDragItem_ is currently hovering over, or null if it is not hovering over a list.
Code »
dragItemForHandle_ :
Which drag item corresponds to a given handle. Set by init(). Specifically, this maps from the unique ID (as given by goog.getUid) of the handle to the drag item.
Code »
dragItemHandleHoverClasses_ :
The user-supplied CSS classes to add to a drag item handle on hover (not during a drag action).
Code »
dragItemHoverClasses_ :
The user-supplied CSS classes to add to a drag item on hover (not during a drag action).
Code »
dragItems_ :
All the drag items. Set by init().
Code »
dragLists_ :
The drag lists.
Code »
draggerElClasses_ :
The user-supplied CSS classes to add to the clone of the current drag item that's actually being dragged around (during a drag action).
Code »
draggerEl_ :
The clone of the current drag item that's actually being dragged around. Note: This is only defined while a drag action is happening.
Code »
dragger_ : goog.fx.Dragger
The dragger object. Note: This is only defined while a drag action is happening.
Code »
eventHandler_ : goog.events.EventHandler
The event handler for this instance.
Code »
hysteresisDistance_ :
The amount of distance, in pixels, after which a mousedown or touchstart is considered a drag.
Code »
isCurrDragItemAlwaysDisplayed_ :
Whether the currDragItem is always displayed. By default the list collapses, the currDragItem's display is set to none, when we do not hover over a draglist.
Code »
isInitialized_ :
Whether the setup has been done to make all items in all lists draggable.
Code »
origList_ :
The original drag list that the current drag item came from. We need to remember this in case the user drops the item outside of any lists, in which case we return the item to its original location. Note: This is only defined while a drag action is happening.
Code »
origNextItem_ :
The original next item in the original list that the current drag item came from. We need to remember this in case the user drops the item outside of any lists, in which case we return the item to its original location. Note: This is only defined while a drag action is happening.
Code »
updateWhileDragging_ :
Whether to update the position of the currDragItem as we drag, i.e., insert the currDragItem each time to the position where it would land if we were to end the drag at that point. Defaults to true.
Code »
actualEventTarget_ : goog.events.EventTarget
The object to use for event.target. Useful when mixing in an EventTarget to another object.
Code »
constructor :
No description.
Code »
eventTargetListeners_ : goog.events.ListenerMap
Maps of event type to an array of listeners.
Code »
parentEventTarget_ : goog.events.EventTarget
Parent event target, used during event bubbling. TODO(user): Change this to goog.events.Listenable. This currently breaks people who expect getParentEventTarget to return goog.events.EventTarget.
Code »
creationStack :
If monitoring the goog.Disposable instances is enabled, stores the creation stack trace of the Disposable instance.
Code »
disposed_ :
Whether the object has been disposed of.
Code »
onDisposeCallbacks_ :
Callbacks to invoke when this object is disposed.
Code »

Static Methods

goog.fx.DragListGroup.getBottomBound_(itemBounds) number
Private helper for getHoverNextItem_(). Given the bounds of an item, computes the item's bottom y-value.
Arguments:
itemBounds : goog.math.Rect
The bounds of the item.
Returns: number  The item's bottom y-value.
code »
goog.fx.DragListGroup.getLeftBound_(itemBounds) number
Private helper for getHoverNextItem_(). Given the bounds of an item, computes the item's left x-value.
Arguments:
itemBounds : goog.math.Rect
The bounds of the item.
Returns: number  The item's left x-value.
code »
goog.fx.DragListGroup.getRightBound_(itemBounds) number
Private helper for getHoverNextItem_(). Given the bounds of an item, computes the item's right x-value.
Arguments:
itemBounds : goog.math.Rect
The bounds of the item.
Returns: number  The item's right x-value.
code »
goog.fx.DragListGroup.isGreaterThan_(ab) boolean
Private helper for getHoverNextItem_().
Arguments:
a : number
Number to compare.
b : number
Number to compare.
Returns: boolean  Whether a is greater than b.
code »
goog.fx.DragListGroup.isLessThan_(ab) boolean
Private helper for getHoverNextItem_().
Arguments:
a : number
Number to compare.
b : number
Number to compare.
Returns: boolean  Whether a is less than b.
code »
goog.fx.DragListGroup.verticalDistanceFromItem_(itemtarget) number
Private helper for getHoverNextItem(). Given an item and a target determine the vertical distance from the item's center to the target.
Arguments:
item : Element
The item to measure the distance from.
target : goog.math.Coordinate
The (x,y) coordinate of the target to measure the distance to.
Returns: number  The vertical distance between the center of the item and the target.
code »

Static Properties

goog.fx.DragListGroup.EventType :
Events dispatched by this class.
Code »
goog.fx.DragListGroup.superClass_ :
No description.
Code »

Package fx

Package Reference