Unlike many other browsers, the WebKit drag-and-drop implementation supports data types beyond those that are found in HTML documents. You do not need to call preventDefault if you simply want to be notified when the events occur.įor security purposes, the getData method can be called only from within the ondrop event handler. If you do not call this method, WebKit receives the data and incorporates it for you. This method takes no parameters and notifies WebKit that your handler will act as the receiver of any incoming data. If you implement handlers for the ondragenter and ondragover events, you should call the preventDefault method of the event object. If the user releases the mouse button, the element receives an ondrop event, which gives it a chance to incorporate the dropped content. The ondragover event is sent continuously while the mouse is over the element to give it a chance to perform any needed tasks. You can use these events to change the cursor or provide feedback as to whether a drop can occur on an element. The ondragenter and ondragleave events let the element know when the user’s mouse enters or leaves the boundaries of the element. Those elements can handle the following events: While a drag is in progress, events are sent to elements that are potential drop targets for the contents being dragged. If the drag was successful, the ondrop handler for the drop target element is also called (before the ondragend handler is called). Upon completion of the operation, the element receives the ondragend event. Once a drag is underway, the ondrag event is fired continuously at the element to give it a chance to perform any tasks it wants to while the drag is in progress. See Manipulating Dragged Data for information on handling the drag data. See Changing Drag Effects for information on the effectAllowed property.
To handle an event, assign a value to the effectAllowed property and put the data for the drag in the dataTransfer object, which you can get from the event object. To cancel a drag operation, call the preventDefault method of the event object. You can provide a handler for this event to initiate or cancel drag operations selectively. The ondragstart event initiates the drag operation. For drag operations, an element can handle the following JavaScript events: Support for drag-and-drop operations is implemented in JavaScript and may be applied to individual elements of your HTML page. This technology is supported with Safari 11 in both macOS and iOS.