ondragenter event

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



The ondragenter event activates when the when the user drags an element over a valid drop target as defined by the "drop targets" property on that element.  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 where the element is about to be dropped 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 = "";