jQuery UI Draggable and Droppable

The Draggable interaction makes any element moveable by mouse or touch. The Droppable interaction defines a target zone where draggable elements can be dropped. Together, they power drag-and-drop interfaces — from kanban boards to shopping carts to file organizers.

Setting Up Draggable

HTML:
<div id="dragMe">Drag me!</div>

jQuery:
$(document).ready(function() {
    $("#dragMe").draggable();
});

One method call makes the element draggable across the entire page.

Draggable Options

$("#dragMe").draggable({
    axis:        "x",           // restrict to horizontal movement only
    containment: "parent",      // keep inside parent element
    revert:      true,          // snap back to original position on drop
    opacity:     0.7,           // semi-transparent while dragging
    cursor:      "move",        // cursor style during drag
    handle:      ".drag-handle" // only drag when handle is grabbed
});

Diagram: Containment Options

  containment: "parent"
  ┌──────────────────────────────┐ ← parent boundary
  │  [Drag box]                  │ ← can move only inside here
  │                              │
  └──────────────────────────────┘

  containment: "window"
  ┌──────────────────────────────────────┐ ← browser window boundary
  │  [Drag box can go anywhere in here]  │
  └──────────────────────────────────────┘

Draggable Events

$("#dragMe").draggable({
    start: function(event, ui) {
        console.log("Drag started at:", ui.position);
    },
    drag: function(event, ui) {
        // fires continuously during drag
        $("#coords").text("X: " + ui.position.left + " Y: " + ui.position.top);
    },
    stop: function(event, ui) {
        console.log("Drag ended at:", ui.position);
    }
});

Setting Up Droppable

HTML:
<div id="dropZone">Drop here</div>

jQuery:
$(document).ready(function() {
    $("#dropZone").droppable({
        drop: function(event, ui) {
            $(this).css("background", "lightgreen");
            $(this).text("Item dropped!");
        }
    });
});

Droppable Options

$("#dropZone").droppable({
    accept:      ".draggable-card",   // only accept elements with this class
    hoverClass:  "highlight-zone",    // class added when draggable hovers over
    activeClass: "active-zone",       // class added when any draggable starts moving
    tolerance:   "fit"                // how much overlap required: "fit","intersect","pointer","touch"
});

Droppable Events

$("#dropZone").droppable({
    over: function(event, ui) {
        // draggable is hovering over the drop zone
        $(this).addClass("hover-highlight");
    },
    out: function(event, ui) {
        // draggable moved away without dropping
        $(this).removeClass("hover-highlight");
    },
    drop: function(event, ui) {
        // item was dropped here
        var itemText = ui.draggable.text();
        $(this).append("<p>Received: " + itemText + "</p>");
        ui.draggable.remove();   // remove the dragged item
    }
});

Diagram: Drag and Drop Flow

  [Draggable Element]
         │
         │  User grabs and moves
         ▼
  draggable:start  fires
         │
  draggable:drag   fires continuously
         │
         ▼
  [Drop Zone] — droppable:over fires as element enters
         │
  User releases mouse
         │
  droppable:drop fires  → action performed
  draggable:stop fires

Practical: Simple Shopping Cart

HTML:
<div id="products">
    <div class="product" data-name="Laptop">Laptop</div>
    <div class="product" data-name="Mouse">Mouse</div>
</div>
<div id="cart">Cart (Drop items here)</div>

jQuery:
$(document).ready(function() {
    $(".product").draggable({ revert: "invalid", opacity: 0.75 });

    $("#cart").droppable({
        accept: ".product",
        hoverClass: "cart-hover",
        drop: function(event, ui) {
            var name = ui.draggable.data("name");
            $(this).append("<p>" + name + " added</p>");
            ui.draggable.draggable("disable").css("opacity", 0.4);
        }
    });
});

revert: "invalid" Explained

  revert: true      → always snaps back after drop
  revert: false     → never snaps back
  revert: "invalid" → snaps back ONLY if dropped outside a valid drop zone
  revert: "valid"   → snaps back ONLY if dropped INSIDE a valid drop zone

Quick Summary

• $(el).draggable() makes an element moveable by mouse or touch.
• Use containment to restrict movement, revert to snap back, handle to limit the drag grip area.
• $(el).droppable() marks an element as a valid drop target.
• Use accept to restrict which elements can be dropped, hoverClass for visual feedback.
• The drop event fires when a draggable lands on the droppable — this is where your action logic goes.

Touch Device Support

jQuery UI Draggable works with mouse events by default. To support touch screens (phones and tablets), include the jQuery UI Touch Punch polyfill after jQuery UI. It converts touch events to mouse events transparently, making all drag-and-drop interactions work on mobile without changing any of your existing code.