Dynamic Container Background Color Based on Element Weight in Drag-and-Drop Web App

Step 1: HTML Structure

Create the HTML structure with the containers and draggable elements. Each container should have a unique ID to identify it. For example:

<div id="container1" class="container"></div>
<div id="container2" class="container"></div>

<div class="draggable">Element 1</div>
<div class="draggable">Element 2</div>

Step 2: CSS Styling

Style the containers and draggable elements according to your design requirements. You can set initial background colors for the containers. For example:

.container {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  transition: background-color 0.5s ease;
}

.draggable {
  cursor: grab;
}

Step 3: JavaScript Logic

Add JavaScript logic to handle the drag-and-drop functionality and update the container's background color based on the total weight.

// Get the containers and draggable elements
const containers = document.querySelectorAll('.container');
const draggables = document.querySelectorAll('.draggable');

// Initialize the total weight for each container
const containerWeights = {
  container1: 0,
  container2: 0,
};

// Add event listeners for drag and drop
draggables.forEach(draggable => {
  draggable.addEventListener('dragstart', dragStart);
});

containers.forEach(container => {
  container.addEventListener('dragover', dragOver);
  container.addEventListener('dragenter', dragEnter);
  container.addEventListener('dragleave', dragLeave);
  container.addEventListener('drop', dragDrop);
});

// Drag events
function dragStart() {
  this.classList.add('dragging');
}

function dragOver(e) {
  e.preventDefault();
}

function dragEnter(e) {
  e.preventDefault();
  this.classList.add('hovered');
}

function dragLeave() {
  this.classList.remove('hovered');
}

function dragDrop() {
  const draggedElement = document.querySelector('.dragging');
  const containerId = this.id;

  // Get the weight of the dragged element (you need to define a mechanism to get this value)

  // Update the total weight of the container
  containerWeights[containerId] += draggedElementWeight;

  // Update the container's background color based on the total weight
  const maxWeight = 100; // Define the maximum weight for color transition
  const weightRatio = containerWeights[containerId] / maxWeight;
  const hue = 120 * (1 - weightRatio); // Calculate the hue based on the weight

  this.style.backgroundColor = `hsl(${hue}, 100%, 50%)`;

  // Reset the styles
  draggedElement.classList.remove('dragging');
  this.classList.remove('hovered');
}