canvas.Drag Class
Class for dragging Canvas/Node elements.
Constructor
canvas.Drag
-
config,
Parameters:
-
config,Objectsee Effect/Drag
Example:
var canvas = new ludo.canvas.Canvas({ renderTo:document.body });
var paintThree = new ludo.canvas.Paint({
autoUpdate:true,
css:{
'fill' : '#DEF',
'stroke':'#888',
'stroke-width':'5',
cursor:'pointer'
}
});
var circle = new ludo.canvas.Circle({cx:280, cy:280, r:85}, { paint:paintThree });
canvas.adopt(circle);
var drag = new ludo.canvas.Drag();
drag.add(circle);
Item Index
Methods
Attributes
Events
Methods
add
-
node
Add node
Parameters:
-
nodeludo.effect.DraggableNode
Returns:
cancelDrag
()
Cancel drag. This method is designed to be called from an event handler attached to the "beforeDrag" event.
Example:
// Here, dd is a effect.Drag object
dd.addEvent('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.addEvent('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 effect.DraggableNode objects added using the add method.
fly
-
config
Fly/Slide DOM node to a position
Parameters:
-
configObject
Example:
<div id="myDiv" style="position:absolute;width:100px;height:100px;border:1px solid #000;background-color:#DEF;left:50px;top:50px"></div>
<script type="text/javascript">
new ludo.effect.Effect().fly({
el: 'myDiv',
duration:.5,
to:{ x:500, y: 300 },
onComplete:function(){
new ludo.effect.Effect().fly({
el: 'myDiv',
duration:1,
to:{ x:600, y: 50 }
});
}
});
</script>
Which will first move "myDiv" to position 500x300 on the screen, then to 600x50.
flyBack
()
Fly/Slide dragged element back to it's original position
flyTo
-
el -
x -
y -
seconds
Fly/Slide DOM node from current location to given x and y coordinats in given seconds.
Parameters:
-
elHTMLElement -
xNumber -
yNumber -
secondsNumber
Example:
You may also use this method like this:
<div id="myDiv" style="position:absolute;width:100px;height:100px;border:1px solid #000;background-color:#DEF;left:50px;top:50px"></div>
<script type="text/javascript">
new ludo.effect.Effect().flyTo('myDiv', 500, 300, .5);
</script>
Which slides "myDiv" to position 500x300 in 0.5 seconds.
flyToShim
-
duration
Fly/Slide dragged element to position of shim. This will only work when useShim is set to true.
Parameters:
-
durationNumberin seconds(default = .2)
getDragged
()
Object
Returns reference to dragged object, i.e. object added in constructor or by use of add method
Returns:
getShim
()
HTMLDivElement
Returns reference to DOM element of shim
Returns:
hideShim
()
Hide shim
showShim
()
Show shim
Attributes
delay
Number
Delay in seconds from mouse down to start drag. If mouse is released within this interval, the drag will be cancelled.
Default: 0
handle
Object | String
Reference to drag handle (Optional). If not set, "el" will be used
Default: undefined
maxY
Number
config y position
Default: undefined
Fires event maxYChange
Fires when the value for the configuration attribute maxY is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
minPos
Number
minPos and maxPos can be used instead of minX,maxX,minY and maxY if you only accept dragging along x-axis or y-axis
Default: undefined
mouseXOffset
Number pixels
While dragging, always show dragged element this amount of pixels right of mouse cursor.
Default: undefined
mouseYOffset
Number pixels
While dragging, always show dragged element this amount of pixels below mouse cursor.
Default: undefined
shimCls
Array
CSS classes to add to shim
Default: undefined
Example:
shimCls:['myShim','myShim-2']
which will results in this shim :
<div class="ludo-shim myShim myShim-2">
useShim
Boolean
True to use dynamically created shim while dragging. When true, the original DOM element will not be dragged.
Default: false
Events
createShim
Event fired when shim is created
Event Payload:
-
shimHTMLDivElement
drag
Event fired while dragging. Sends position, example {x:100,y:50} and reference to effect.Drag as arguments
Event Payload:
-
xObjectand y
-
thiseffect.Drag
end
Event fired on drag end
Event Payload:
-
draggedeffect.DraggableNode -
thisludo.effect.Drag -
xObjectand y
flyBack
Event fired after flyBack animation is complete
Event Payload:
-
thiseffect.Drag -
domHTMLElementnode
start
Event fired before dragging
Event Payload:
-
objecteffect.DraggableNodeto be dragged.
-
componentludo.effect.Drag -
pos(xObjectand y)