Streaming live at 10am (PST)

Jquery - Draggable/Droppable Help

I’ve managed to get to grips with making elements draggable but I’m struggling with the droppable aspect.

Webflow Project

Published site

Here’s what I’m looking for:

  • Numbered boxes to be draggable
  • Numbered boxes to snap to lettered boxes
  • Numbered boxes to swap if dragged over another (eg. Box 1 in Box A, Box 2 in Box B - Drag Box 1 to B and Box 2 will move to Box A)
  • When dragging a numbered box I’d like for the lettered boxes to change colour to highlight that they are droppable areas.

This is just a test so far to get my head around the code but I’m working towards a site which lets you build football formations/team sheets. Much like this but with more restrictions as to where you can drag each position.

Any help on this would be appreciated :slight_smile:

Can you provide a description of what you have done so far and what’s working (or not)?