How do you implement drag-and-drop functionality using jQuery?

Question

Aryan Kumar · Answer

jQuery provides a number of methods and events to implement drag-and-drop functionality. Here's a simple example of how to implement drag-and-drop using jQuery:

$(document).ready(function() {
 // Make the element draggable
 $('#drag-element').draggable({
   revert: true  // Snap back to original position when released
 });
 
 // Make the drop area accept the draggable element
 $('#drop-area').droppable({
   drop: function(event, ui) {
     // Handle the drop event here
     $(this).append(ui.draggable);
   }
 });
});

In this example, the draggable() method is used to make an element draggable. The droppable() method is used to specify a drop area and handle the drop event.

The draggable() method accepts various options, such as revert (which determines whether the element should snap back to its original position when released) and helper (which specifies the helper element that should be dragged).

The droppable() method accepts various options, such as accept (which specifies the draggable elements that are accepted by the drop area), activeClass (which specifies the CSS class to be applied to the drop area when a draggable element is hovering over it), and hoverClass (which specifies the CSS class to be applied to the draggable element when it is hovering over the drop area).

The drop event is fired when a draggable element is dropped onto the drop area. The event handler receives two parameters: event (the jQuery event object) and ui (an object that contains information about the draggable element, such as its position and the helper element).

In the example code, the append() method is used to move the draggable element to the drop area when it is dropped. You can customize this behavior to suit your needs.

forum

How do you implement drag-and-drop functionality using jQuery?

Can you answer this question?

1 Answers