JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<div id="main-container">
  <div id="draggable" draggable="true" data-type="Button">Drag Button</div>
  <div id="draggable2" draggable="true" data-type="Dropdown">Drag Dropdown</div>
  <div id="draggable3" draggable="true" data-type="Radio">Drag Radio Button</div>
  <div id="droppable">Drop here!</div>
</div>

CSS

#main-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: red;
  width: 50%;
  padding: 20px;
  box-sizing: border-box;
}

#droppable {
  height: 200px; /* Just for demonstration */
  border: 2px dashed #aaa;
  margin-top: 20px;
}

JavaScript

// Get the draggable elements
var draggables = document.querySelectorAll('[draggable="true"]');

// Loop through draggable elements and add dragstart event listener
draggables.forEach(function(draggable) {
  draggable.addEventListener('dragstart', function(event) {
    // Set the drag data to the data-type attribute
    event.dataTransfer.setData('text/plain', draggable.getAttribute('data-type'));
  });
});

// Get the droppable element
var droppable = document.getElementById('droppable');

// Add the dragover event listener
droppable.addEventListener('dragover', function(event) {
  // Prevent default to allow drop
  event.preventDefault();
});

// Add the drop event listener
droppable.addEventListener('drop', function(event) {
  // Prevent default action
  event.preventDefault();

  // Get the drag data
  var dataType = event.dataTransfer.getData('text/plain');

  // Create different elements based on data type
  var element;
  switch (dataType) {
    case 'Button':
      element = document.createElement('button');
      element.textContent = 'Button';
      break;
    case 'Dropdown':
      element = document.createElement('select');
      var option1 = document.createElement('option');
      option1.textContent = 'Option 1';
      var option2 = document.createElement('option');
      option2.textContent = 'Option 2';
      element.appendChild(option1);
      element.appendChild(option2);
      break;
    case 'Radio':
      element = document.createElement('input');
      element.setAttribute('type', 'radio');
      break;
    // Add more cases for other data types
  }

  // Append the created element to the drop target
  droppable.appendChild(element);
});