effect.DragDrop Class
effect.Drag with support for drop events.
Item Index
Methods
Attributes
Methods
add
-
node
Add draggable object
Parameters:
-
node
effect.DraggableNode | String | HTMLDivElement
Returns:
Example:
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);
}
addDropTarget
-
node
Create new drop point.
Parameters:
-
node
ludo.effect.DropPoint
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:
-
config
Object
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:
-
el
HTMLElement -
x
Number -
y
Number -
seconds
Number
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:
-
duration
Numberin 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
setInvalid
()
Set drop point invalid. This method is usually used in connection with a listener for the enterDropTarget event
Example:
dd.addEvent('enterDropTarget', function(node, dd){
if(node.name === 'John Doe'){
dd.setInvalid(); // Triggers an invalidDropTarget event
}
});
showShim
()
Show shim
Attributes
captureRegions
Boolean | Undefined
optional
Capture regions when moving over drop points
Default: false
Example:
captureRegions:true
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:
-
e
EventFacadeAn 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 | Undefined pixels
optional
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:
-
shim
HTMLDivElement
drag
Event fired while dragging. Sends position, example {x:100,y:50} and reference to effect.Drag as arguments
Event Payload:
-
x
Objectand y
-
this
effect.Drag
drop
drop event caused by mouseup on valid drop point.
Event Payload:
-
dragged
effect.DraggableNodenode
-
drop
effect.DropPointtarget
-
this
effect.DragDrop -
target
HTMLElement
east
Enter east region of a drop point
Event Payload:
-
dragged
effect.DraggableNodenode
-
drop
effect.DropPointtarget
-
this
effect.DragDrop -
target
HTMLElement
end
Event fired on drag end
Event Payload:
-
dragged
effect.DraggableNode -
this
ludo.effect.Drag -
x
Objectand y
enterDropTarget
Enter drop point event. This event is fired when dragging is active and mouse enters a drop point
Event Payload:
-
node
effect.DraggableNode -
node
effect.DropPoint -
this
effect.DragDrop -
target
HTMLElement
flyBack
Event fired after flyBack animation is complete
Event Payload:
-
this
effect.Drag -
dom
HTMLElementnode
invalidDropTarget
Enters invalid drop point.
Event Payload:
-
dragged
effect.DraggableNodenode
-
drop
effect.DropPointtarget
-
this
effect.DragDrop -
target
HTMLElement
north
Enter north region of a drop point
Event Payload:
-
dragged
effect.DraggableNodenode
-
drop
effect.DropPointtarget
-
this
effect.DragDrop -
target
HTMLElement
south
Enter south region of a drop point
Event Payload:
-
dragged
effect.DraggableNodenode
-
drop
effect.DropPointtarget
-
this
effect.DragDrop -
target
HTMLElement
start
Event fired before dragging
Event Payload:
-
object
effect.DraggableNodeto be dragged.
-
component
ludo.effect.Drag -
pos(x
Objectand y)
validDropTarget
Enters valid drop point.
Event Payload:
-
dragged
effect.DraggableNodenode
-
drop
effect.DropPointtarget
-
this
effect.DragDrop -
target
HTMLElement
west
Enter west region of a drop point
Event Payload:
-
dragged
effect.DraggableNodenode
-
drop
effect.DropPointtarget
-
this
effect.DragDrop -
target
HTMLElement