LudoJS

ludo.effect.Effect

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: