ondragleave event

Owned by Alex Roytman
Last updated: Aug 16, 2023 by Jessica Tomkins
1 min read



The ondragleave event activates when the user moves an element out of a valid drop target during a drag operation.  Information about the drag and drop operation is provided using the global pui.dragDropInfo object, which will contain the following properties:

  • dd element - reference to the drag and drop element being dragged

  • dd element id - the id of the drag and drop element

  • dd record number - the record number of the subfile record being dragged when the drag operation is being performed on a grid element

  • proxy - reference to the drag and drop proxy element; this will be the same as dd element if the "use proxy" property is not set

  • target element - reference to the drop target element

  • target element id - the id of the drop target element

  • target record number - the record number position the element was dragged out of when the target element is a grid

  • event - the browser's event object; this allows you to retrieve information such as mouse position

  • text - text description of the event

Example:

Draw a red border around the target element when the drag and drop element is over it:

ondragenter: pui.dragDropInfo["target element"].style.border = "2px solid red";

ondragleave: pui.dragDropInfo["target element"].style.border = "";