Home

# Class goog.fx.AbstractDragDrop

Abstract class that provides reusable functionality for implementing drag and drop functionality. This class also allows clients to define their own subtargeting function so that drop areas can have finer granularity then a singe element. This is accomplished by using a client provided function to map from element and coordinates to a subregion id. This class can also be made aware of scrollable containers that contain drop targets by calling addScrollableContainer. This will cause dnd to take changing scroll positions into account while a drag is occuring.

extends goog.events.EventTarget

Instance Method Summary
| `addDragTarget_(?goog.fx.AbstractDragDrop target, ?goog.fx.DragDropItem item)` Add possible drop target for current drag operation.
| `addItem(?goog.fx.DragDropItem item)` Add item to drag object.
| `addScrollableContainer(?Element element)` Makes drag and drop aware of a target container that could scroll mid drag.
| `addTarget(?goog.fx.AbstractDragDrop target)` Associate drop target with drag element.
| `afterEndDrag(?goog.fx.DragDropItem= opt_dropTarget)` Called after a drag operation has finished.
| `calculateTargetBox_(?goog.math.Box box)` Calculate the outer bounds (the region all targets are inside).
| `cloneNode_(?Element sourceEl) ⇒ ?Element` Creates copy of node being dragged.
| `containerScrollHandler_(?goog.events.Event e)` Event handler for containers scrolling.
| `createDragElement(?Element sourceEl) ⇒ ?Element` Creates an element for the item being dragged.
| `createDraggerFor(?Element sourceEl, ?Element el, ?goog.events.BrowserEvent event) ⇒ ?goog.fx.Dragger` Creates the Dragger for the drag element.
| `disposeDrag()` Called once a drag operation has finished. Removes event listeners and elements.

`disposeInternal()`

Unattach 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, it should be something like this:

    MyClass.prototype.disposeInternal = function() {
    MyClass.superClass_.disposeInternal.call(this);
    // Dispose logic for MyClass
    };

| `disposeItem(?goog.fx.DragDropItem item)` Called when removing an item. Removes event listeners and classes.
| `disposeScrollableContainerListeners_()` Cleans up the scrollable container listeners.
| `endDrag(?goog.fx.DragEvent event)` Event handler that's used to stop drag. Fires a drop event if over a valid target.
| `getDragElementPosition(?Element el, ?Element dragEl, ?goog.events.BrowserEvent event) ⇒ ?goog.math.Coordinate` Returns the position for the drag element.
| `getDragger() ⇒ ?goog.fx.Dragger` Returns the dragger object.
| `getScrollPos() ⇒ ?goog.math.Coordinate` Gets the scroll distance as a coordinate object, using the window of the current drag element's dom.
| `getTargetFromPosition_(number x, number y) ⇒ ?Object` Returns the target for a given cursor position.
| `init()` Initialize drag and drop functionality for sources/targets already added. Sources/targets added after init has been called will initialize themselves one by one.
| `initItem(?goog.fx.DragDropItem item)` Initializes a single item.
| `initScrollableContainerListeners_()` Sets up listeners for the scrollable containers that keep track of their scroll positions.
| `isInitialized() ⇒ boolean` Whether the control has been initialized.
| `isInside_(number x, number y, ?goog.math.Box box) ⇒ boolean` Checks whatever a given point is inside a given box.

`maybeCreateDummyTargetForPosition_(number x, number y) ⇒ ?goog.fx.ActiveDropTarget_`

Creates a dummy target for the given cursor position. The assumption is to create as big dummy target box as possible, the only constraints are: - The dummy target box cannot overlap any of real target boxes. - The dummy target has to contain a point with current mouse coordinates. NOTE: For performance reasons the box construction algorithm is kept simple and it is not optimal (see example below). Currently it is O(n) in regard to the number of real drop target boxes, but its result depends on the order of those boxes being processed (the order in which they're added to the targetList_ collection). The algorithm. a) Assumptions - Mouse pointer is in the bounding box of real target boxes. - None of the boxes have negative coordinate values. - Mouse pointer is not contained by any of "real target" boxes. - For targets inside a scrollable container, the box used is the intersection of the scrollable container's box and the target's box. This is because the part of the target that extends outside the scrollable container should not be used in the clipping calculations. b) Outline - Initialize the fake target to the bounding box of real targets. - For each real target box - clip the fake target box so it does not contain that target box, but does contain the mouse pointer. -- Project the real target box, mouse pointer and fake target box onto both axes and calculate the clipping coordinates. -- Only one coordinate is used to clip the fake target box to keep the fake target as big as possible. -- If the projection of the real target box contains the mouse pointer, clipping for a given axis is not possible. -- If both clippings are possible, the clipping more distant from the mouse pointer is selected to keep bigger fake target area. - Save the created fake target only if it has a big enough area. c) Example

    Input:           Algorithm created box:        Maximum box:
    +---------------------+ +---------------------+ +---------------------+
    | B1      |        B2 | | B1               B2 | | B1               B2 |
    |         |           | |   +-------------+   | |+-------------------+|
    |---------x-----------| |   |             |   | ||                   ||
    |         |           | |   |             |   | ||                   ||
    |         |           | |   |             |   | ||                   ||
    |         |           | |   |             |   | ||                   ||
    |         |           | |   |             |   | ||                   ||
    |         |           | |   +-------------+   | |+-------------------+|
    | B4      |        B3 | | B4               B3 | | B4               B3 |
    +---------------------+ +---------------------+ +---------------------+

| `maybeStartDrag(?goog.events.BrowserEvent event, ?goog.fx.DragDropItem item)` Starts a drag event for an item if the mouse button stays pressed and the cursor moves a few pixels. Allows dragging of items without first having to register them with addItem.
| `moveDrag_(?goog.fx.DragEvent event)` Event handler for drag events. Determines the active drop target, if any, and fires dragover and dragout events appropriately.
| `recalculateDragTargets()` Recalculates the geometry of this source's drag targets. Call this if the position or visibility of a drag target has changed during a drag, or if targets are added or removed. TODO(user): this is an expensive operation; more efficient APIs may be necessary.
| `recalculateScrollableContainers()` Recalculates the current scroll positions of scrollable containers and allocates targets. Call this if the position of a container changed or if targets are added or removed.
| `removeAllScrollableContainers()` Removes all scrollable containers.
| `removeItems()` Removes all items.
| `setDragClass(string className)` Set class to add to source elements being dragged.
| `setScrollTarget(?EventTarget scrollTarget)` Sets the SCROLL event target to make drag element follow scrolling.
| `setSourceClass(string className)` Set class to add to source elements.

`setSubtargetFunction(?Function f)`

Set a function that provides subtargets. A subtargeting function returns an arbitrary identifier for each subtarget of an element. DnD code will generate additional drag over / out events when switching from subtarget to subtarget. This is useful for instance if you are interested if you are on the top half or the bottom half of the element. The provided function will be given the DragDropItem, box, x, y box is the current window coordinates occupied by element x, y is the mouse position in window coordinates

| `setTargetClass(string className)` Set class to add to target elements.
| `startDrag(?goog.events.BrowserEvent event, ?goog.fx.DragDropItem item)` Event handler that's used to start drag.
| `suppressSelect_(?goog.events.Event event) ⇒ boolean` Event handler for suppressing selectstart events. Selecting should be disabled while dragging.