new ludo.effect.Effect()
Base class for animations
- Source:
Fires:
- ludo.effect.Effect#event:animationComplete
Methods
-
add(node) → {effect.DraggableNode}
-
Add draggable object
Parameters:
Name Type Description node
effect.DraggableNode | String | HTMLDivElement - Source:
Returns:
- Type
- effect.DraggableNode
Examples
dragObject.add({ el: 'myDiv', handle : 'myHandle' }); handle is optional.
dragObject.add('idOfMyDiv'); You can also add custom properties:
dragobject.add({ id: "myReference', el: 'myDiv', column: 'city' }); ... ... dragobject.addEvent('before', beforeDrag); ... ... function beforeDrag(dragged){ console.log(dragged.el); console.log(dragged.column); }
-
cancelDrag()
-
Cancel drag. This method is designed to be called from an event handler
attached to the "beforeDrag" event.- Source:
Examples
// Here, dd is a {{#crossLink "effect.Drag"}}{{/crossLink}} object dd.on('before', function(draggable, dd, pos){ if(pos.x > 1000 || pos.y > 500){ dd.cancelDrag(); } }); In this example, dragging will be cancelled when the x position of the mouse is greater than 1000 or if the y position is greater than 500. Another more useful example is this:
dd.on('before', function(draggable, dd){ if(!this.isDraggable(draggable)){ dd.cancelDrag() } }); Here, we assume that we have an isDraggable method which returns true or false for whether the given node is draggable or not. "draggable" in this example is one of the {{#crossLink "effect.DraggableNode"}}{{/crossLink}} objects added using the {{#crossLink "effect.Drag/add"}}{{/crossLink}} method.
-
getDraggedX() → {Number}
-
Return amount dragged in x direction
- Source:
Returns:
x
- Type
- Number
-
getDraggedY() → {Number}
-
Return amount dragged in y direction
- Source:
Returns:
y
- Type
- Number
-
getEl() → {HTMLElement}
-
Returns reference to draggable DOM node
- Source:
Returns:
DOMNode
- Type
- HTMLElement
-
getHeight() → {Number}
-
Returns height of dragged element
- Source:
Returns:
- Type
- Number
-
getHeight() → {Number}
-
Returns width of dragged element
- Source:
Returns:
- Type
- Number
-
getLeft() → {Number}
-
Returns current left position of dragged
- Source:
Returns:
- Type
- Number
-
getShim() → {HTMLDivElement}
-
Returns reference to DOM element of shim
- Source:
Returns:
shim
- Type
- HTMLDivElement
-
getTop() → {Number}
-
Returns current top/y position of dragged.
- Source:
Returns:
- Type
- Number
-
getX() → {Number}
-
Return current x pos
- Source:
Returns:
x
- Type
- Number
-
getY() → {Number}
-
Return current y pos
- Source:
Returns:
y
- Type
- Number
-
hideShim()
-
Hide shim
- Source:
-
remove(id) → {Boolean}
-
Remove node
Parameters:
Name Type Description id
String - Source:
Returns:
success
- Type
- Boolean
-
setMaxPos(pos)
-
Set new max pos
Parameters:
Name Type Description pos
Number - Source:
-
setMaxX(x)
-
Set new max X pos
Parameters:
Name Type Description x
Number - Source:
-
setMaxY(y)
-
Set new max Y pos
Parameters:
Name Type Description y
Number - Source:
-
setMinPos(pos)
-
Set new min pos
Parameters:
Name Type Description pos
Number - Source:
-
setMinX(x)
-
Set new min X pos
Parameters:
Name Type Description x
Number - Source:
-
setMinY(y)
-
Set new min Y pos
Parameters:
Name Type Description y
Number - Source:
-
setShimText(text)
-
Set text content of shim
Parameters:
Name Type Description text
String - Source: