jQuery UI Droppable over Event

jQuery UI Droppable is a commonly used feature in web development for drag-and-drop functionality. The over event is an option in the Droppable widget that is triggered when a draggable element is hovered over the droppable element. In this article, we will discuss the over event in detail and provide examples of how it can be used in different scenarios.

Syntax

The over event can be added to the Droppable widget using the following syntax:

$( ".selector" ).droppable({
  over: function( event, ui ) {
    // code to execute when an element is hovered over the droppable element
  }
});

Parameters

The over event has two parameters:

• event - The event object that is triggered
• ui - An object containing information about the draggable and droppable elements

Functionality

The over event is triggered when a draggable element is hovered over the droppable element. This event is useful when we want to execute some code when a draggable element enters the droppable element. For example, we can change the background color of the droppable element when a draggable element is hovered over it.

$( ".selector" ).droppable({
  over: function( event, ui ) {
    $( this ).css( "background-color", "yellow" );
  }
});

Multiple Droppable Elements

When we have multiple droppable elements, we can use the over event to determine which droppable element the draggable element is hovering over. We can use the ui object to get the element that triggered the event and perform different actions based on the droppable element.

$( ".selector" ).droppable({
  over: function( event, ui ) {
    if ($(this).attr("id") == "droppable1") {
      $(this).html("Drag me to droppable2!");
    } else if ($(this).attr("id") == "droppable2") {
      $(this).html("Drag me to droppable1!");
    }
  }
});

Conclusion

The over event in jQuery UI Droppable is a useful feature for adding functionality to drag-and-drop interactions. We can use this event to execute code when a draggable element is hovered over the droppable element. With the ui object, we can also determine which droppable element is being hovered over and perform different actions based on the droppable element.