Search results

Draggable API in JavaScript Base API control

Draggable Module provides support to enable draggable functionality in Dom Elements.

<div id='drag'>Draggable</div>
<script>
var ele = document.getElementById('drag');
var drag:Draggable = new Draggable(ele,{
    clone:false,
    drag: function(e) {
     //drag handler code.
     },
    handle:'.class'
});
</script>

Properties

abort

string | string[]

Defines the child element selector which will prevent dragging of element.

axis

DragDirection

Defines the axis to limit the draggable element drag path.The possible axis path values are

  • x - Allows drag movement in horizontal direction only.
  • y - Allows drag movement in vertical direction only.

clone

boolean

If clone set to true, drag operations are performed in duplicate element of the draggable element.

Defaults to true

cursorAt

PositionModel

Defines the distance between the cursor and the draggable element.

distance

number

Defines the minimum distance draggable element to be moved to trigger the drag operation.

Defaults to 1

dragArea

HTMLElement | string

Defines the parent element in which draggable element movement will be restricted.

handle

string

Defines the child element selector which will act as drag handle.

helper

Function

Defines the callback function for customizing the cloned element.

isDragScroll

boolean

Defines the dragArea is scrollable or not.

scope

string

Defines the scope value to group sets of draggable and droppable items. A draggable with the same scope value will be accepted by the droppable.

Methods

addEventListener

Adds the handler to the given event listener.

Parameter Type Description
eventName string A String that specifies the name of the event
handler Function Specifies the call to run when the event occurs.

Returns void

dataBind

Bind property changes immediately to components

Returns void

removeEventListener

Removes the handler from the given event listener.

Parameter Type Description
eventName string A String that specifies the name of the event to remove
handler Function Specifies the function to remove

Returns void

Events

drag

Function

Specifies the callback function for drag event.

dragStart

Function

Specifies the callback function for dragStart event.

dragStop

Function

Specifies the callback function for dragStop event.