Droppable

23 Sep 20252 minutes to read

Droppable Module provides support to enable droppable functionality in Dom Elements.

<div id='drop'>Droppable</div>
<script>
let ele:HTMLElement = document.getElementById('drop');
var drag:Droppable = new Droppable(ele,{
    accept:'.drop',
    drop: function(e) {
     //drop handler code.
    }
});
</script>

Properties

accept string

Defines the selector for draggable element to be accepted by the droppable.

scope string

Defines the scope value to group sets of draggable and droppable items.
A draggable with the same scope value will only 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

drop | Paramter Name | Type | |------|------| | args | DropEventArgs |

Specifies the callback function, which will be triggered while drag element is dropped in droppable.

out Function

Specifies the callback function, which will be triggered while drag element is moved out of droppable element.

over Function

Specifies the callback function, which will be triggered while drag element is moved over droppable element.