LudoJS Class: Drag

new ludo.effect.Drag(config)

Class for dragging DOM elements.

Parameters:

Name Type Description

config

Object

Properties

Name	Type	Description
`minX`	Number	Optional minimum left coordinate
`maxX`	Number	Optional maximum left coordinate
`minY`	Number	Optional minimum top coordinate
`maxY`	Number	Optional maximum top coordinate
`maxY`	Number	Optional maximum top coordinate
`el`	String \| HTMLElement	This element is draggable.
`handle`	String \| HTMLElement	Optional dom element. Mouse down on this element will initiate the drag process. example: A title bar above a view. If not set, Mouse down on this.el will initiate dragging.
`directions`	String	Accept dragging in these directions, default: "XY". For horizontal dragging only, use "X" and for vertical "Y".
`minPos`	Number	Alternative to minX and minY when you only accepts dragging along the X or Y-axis.
`maxPos`	Number	Alternative to maxX and maxY when you only accepts dragging along the X or Y-axis.
`delay`	Number	Optional delay in seconds from mouse down to dragging starts. Default: 0
`useShim`	Boolean	True to drag a "ghost" DOM element while dragging, default: false
`shimCls`	String	Name of css class to add to the shim
`autoHideShim`	Boolean	True to automatically hide shim on drag end, default: true
`mouseYOffset`	Number	While dragging, always show dragged element this amount of pixels below mouse cursor.
`mouseXOffset`	Number	While dragging, always show dragged element this amount of pixels right of mouse cursor.
`unit`	String	Unit used while dragging, default: "px"

Source:

effect/drag.js, line 1

Fires:

ludo.effect.Drag#before Event fired before drag starts. Params: 1) Dom element to be dragged, 2) ludo.effect.Drag, 3) {x,event:y}
ludo.effect.Drag#start Event when drag starts. Params: 1) Dom element to be dragged, 2) ludo.effect.Drag, 3) {x,event:y}
ludo.effect.Drag#drag' Event when drag ends. Params: 1) Dom element to be dragged, 2) ludo.effect.Drag, 3) {x,event:y}
ludo.effect.Drag#end' Event when drag ends. Params: 1) {x,y}, 2) dragged node 3) ludo.effect.event:Drag
ludo.effect.Drag#showShim' Event fired when shim DOM node is shown. Argument: 1) Shim DOM Node, 2) ludo.effect.event:Drag
ludo.effect.Drag#flyToShim' Event fired after flyBack animation is complete. Arguments: 1) ludo.effect.Drag,event: 2) Shim DOM node
ludo.effect.Drag#flyBack' Event fired when shim DOM node is shown. Argument: Arguments: 1) ludo.effect.Drag,event: 2) Shim DOM node

Example

<style type="text/css">
 .ludo-shim {
		 border: 15px solid #AAA;
		 background-color: #DEF;
		 margin: 5;
		 opacity: .5;
		 border-radius: 5px;
	}
 .draggable{
		width:150px;
		z-index:1000;
		height:150px;
		border-radius:5px;
		border:1px solid #555;
		background-color:#DEF
	}
 </style>
 <div id="draggable" class="draggable">
 I am draggable
 </div>
 <script type="text/javascript">
 var d = new ludo.effect.Drag({
		useShim:true,
		 listeners:{
			 endDrag:function(dragged, dragEffect){
				 dragEffect.getEl().setStyles({
					 left : dragEffect.getX(),
					 top: dragEffect.getY()
				 });
			 },
			 drag:function(pos, dragEffect){
				 dragEffect.setShimText(dragEffect.getX() + 'x' + dragEffect.getY());
			 }
		 }
	 });
 d.add('draggable'); // "draggable" is the id of the div
 </script>

Extends

ludo.effect.Effect

Methods

add(node) → {effect.DraggableNode}

Add draggable object

Parameters:

Name	Type	Description
`node`	effect.DraggableNode \| String \| HTMLDivElement

Inherited From:

ludo.effect.Effect#add

Source:

effect/drag.js, line 157

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.

Inherited From:

ludo.effect.Effect#cancelDrag

Source:

effect/drag.js, line 387

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}