API Docs for: 1
Show:

effect.Drag Class

Extends effect.Effect
Defined in: js/ludo-all.js:1136
Module: language

Class for dragging DOM elements.

Constructor

effect.Drag

(
  • config
)

Defined in js/ludo-all.js:1136

Parameters:

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>

Methods

add

(
  • node
)
effect.DraggableNode

Defined in js/ludo-all.js:1357

Add draggable object

Parameters:

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);
}

cancelDrag

()

Defined in js/ludo-all.js:1587

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:

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

()

Defined in js/ludo-all.js:1968

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:

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
)

Defined in js/ludo-all.js:1982

Fly/Slide dragged element to position of shim. This will only work when useShim is set to true.

Parameters:

  • duration Number

    in seconds(default = .2)

getDragged

() Object

Defined in js/ludo-all.js:1481

Returns reference to dragged object, i.e. object added in constructor or by use of add method

Returns:

getEl

() Object

Defined in js/ludo-all.js:1491

Returns reference to draggable DOM node

Returns:

Object: DOMNode

getHeight

() Number

Defined in js/ludo-all.js:1851

Returns height of dragged element

Returns:

getHeight

() Number

Defined in js/ludo-all.js:1842

Returns width of dragged element

Returns:

getLeft

() Number

Defined in js/ludo-all.js:1859

Returns current left position of dragged

Returns:

getShim

() HTMLDivElement

Defined in js/ludo-all.js:1877

Returns reference to DOM element of shim

Returns:

HTMLDivElement: shim

getTop

() Number

Defined in js/ludo-all.js:1868

Returns current top/y position of dragged.

Returns:

getX

() Number

Defined in js/ludo-all.js:1679

Return current x pos

Returns:

Number: x

getY

() Number

Defined in js/ludo-all.js:1687

Return current y pos

Returns:

Number: y

hideShim

()

Defined in js/ludo-all.js:1951

Hide shim

remove

(
  • id
)
Boolean

Defined in js/ludo-all.js:1411

Remove node

Parameters:

Returns:

Boolean: success

setMaxPos

(
  • pos
)

Defined in js/ludo-all.js:1794

Set new max pos

Parameters:

setMaxX

(
  • x
)

Defined in js/ludo-all.js:1754

Set new max X pos

Parameters:

setMaxY

(
  • y
)

Defined in js/ludo-all.js:1778

Set new max Y pos

Parameters:

setMinPos

(
  • pos
)

Defined in js/ludo-all.js:1786

Set new min pos

Parameters:

setMinX

(
  • x
)

Defined in js/ludo-all.js:1762

Set new min X pos

Parameters:

setMinY

(
  • y
)

Defined in js/ludo-all.js:1770

Set new min Y pos

Parameters:

setShimText

(
  • text
)

Defined in js/ludo-all.js:1959

Set text content of shim

Parameters:

showShim

()

Defined in js/ludo-all.js:1908

Show shim

Attributes

autohideShim

Boolean

Defined in js\ludo-all.js:1286

True to automatically hide shim after drag is finished

Default: true

delay

Number

Defined in js\ludo-all.js:1263

Delay in seconds from mouse down to start drag. If mouse is released within this interval, the drag will be cancelled.

Default: 0

dragX

String

Defined in js\ludo-all.js:1244

Accept dragging in these directions

Default: XY

el

Object | String

Defined in js\ludo-all.js:1193

Reference to DOM element to be dragged

Default: undefined

handle

Object | String

Defined in js\ludo-all.js:1186

Reference to drag handle (Optional). If not set, "el" will be used

Default: undefined

maxPos

Number

Defined in js\ludo-all.js:1238

Default: undefined

maxX

Number

Defined in js\ludo-all.js:1216

Maximum x position

Default: undefined

maxY

Number

Defined in js\ludo-all.js:1223

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 EventFacade
    An Event Facade object with the following attribute-specific properties added:
    • prevVal Any
      The value of the attribute, prior to it being set.
    • newVal Any
      The value the attribute is to be set to.
    • attrName String
      The name of the attribute being set.
    • subAttrName String
      If setting a property within the attribute's value, the name of the sub-attribute property being set.

minPos

Number

Defined in js\ludo-all.js:1231

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

minX

Number

Defined in js\ludo-all.js:1201

Minimum x position

Default: undefined

minY

Number

Defined in js\ludo-all.js:1208

Minimum y position

Default: undefined

mouseXOffset

Number pixels

Defined in js\ludo-all.js:1315

While dragging, always show dragged element this amount of pixels right of mouse cursor.

Default: undefined

mouseYOffset

Number pixels

Defined in js\ludo-all.js:1307

While dragging, always show dragged element this amount of pixels below mouse cursor.

Default: undefined

shimCls

Array

Defined in js\ludo-all.js:1294

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">

unit, example : "px", "%"

Defined in js\ludo-all.js:1252

Unit used while dragging

Default: px

useShim

Boolean

Defined in js\ludo-all.js:1277

True to use dynamically created shim while dragging. When true, the original DOM element will not be dragged.

Default: false

Events

effect.DraggableNode

Defined in js\ludo-all.js:1546

Event fired before drag

Event Payload:

  • object Object

    to be dragged

  • component ludo.effect.Drag
  • pos(x Object

    and y)

animationComplete

Fired when animation is completed

Event Payload:

createShim

Defined in js\ludo-all.js:1898

Event fired when shim is created

Event Payload:

  • shim HTMLDivElement

drag

Defined in js\ludo-all.js:1654

Event fired while dragging. Sends position, example {x:100,y:50} and reference to effect.Drag as arguments

Event Payload:

end

Defined in js\ludo-all.js:1733

Event fired on drag end

Event Payload:

flyBack

Defined in js\ludo-all.js:2009

Event fired after flyBack animation is complete

Event Payload:

flyBack

Defined in js\ludo-all.js:2019

Event fired after flyToShim animation is complete

Event Payload:

start

Defined in js\ludo-all.js:1562

Event fired before dragging

Event Payload: