JSFiddle - React, Tailwind, and code Playground

HTML

<div class="field-template"></div>
<div class="field-elements">
  <span class="draggable" data-target="dropdown" draggable="true">Dropdown</span>
  <span class="draggable" data-target="text" draggable="true">Textfeld</span>
</div>

CSS

.field-template {
  display: inline-block;
  background: #fff;
  padding: 5px;
  border: 1px solid #8c8f94;
  border-radius: 4px;
  min-width: 250px;
  min-height: 100px;
  margin-bottom: 5px;
  width: 100%;
}

.field-template {
  display: flex;
  flex-flow: column;
}

.field-template>div {
  display: inline-block;
  border: 1px dashed #666;
  padding: 20px;
  position: relative;
}

.field-template>div+.item {
  border-top: 0;
}

.field-template>div .line {
  display: block;
  margin-bottom: 5px;
}

.field-template>div .headline {
  font-size: large;
  margin-bottom: 7px;
  display: block;
}

.field-template>div label {
  margin-right: 5px;
  width: 45px;
  display: inline-block;
}

.field-template>div .status {
  margin: 0;
  position: absolute;
  top: 10px;
  right: 10px;
}

.field-template>div .field-id {
  position: absolute;
  top: -1px;
  left: -1px;
  border-bottom: 1px dashed #666;
  border-right: 1px dashed #666;
  border-top: 0;
  border-left: 0;
  width: 30px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-top: 0;
  border-left: 0;
}

.field-elements span {
  display: inline-block;
  color: #fff;
  border: 1px solid #666;
  padding: 5px;
  border-radius: 4px;
  line-height: 1em;
  background: #666;
  margin: 2px;
}

JavaScript

jQuery(document).ready(function($) {

  var field_id = 1;
  var cur_drag_item;

  $('body').on({
    dragstart: function(e) {
      e.stopPropagation();
      console.log(e);
      console.log(e.target);
      jQuery(this).addClass('is-dragging');
      jQuery(this).siblings('.draggable').addClass('not-dragging');
      cur_drag_item = $(this);
    },
    dragend: function(e) {
      jQuery(this).removeClass('is-dragging');
      jQuery(this).siblings('.draggable').removeClass('not-dragging');
    },
  }, '.draggable');

  $('.field-template').on({
    drop: function(e) {
      e.preventDefault();
      e.stopPropagation();
      if (!cur_drag_item.is('.item')) {
        var target = cur_drag_item.attr('data-target');
        var output = '<div class="item draggable" data-id="' + field_id + '" data-item-type="' + target + '" draggable="true"><div class="wrap"><span class="field-id">#' + field_id + '</span></span>';
        if (target == 'text') {
          output += '<span class="headline">Textfeld</span><label>Label</label><input type="text" name="field_label" required />';
        } else if (target == 'dropdown') {
          output += '<span class="headline">Dropdown</span><span class="line"><label>Label</label><input type="text" name="field_label" required /></span><span class="line"><label>Option</label><input type="text" name="option" required /></span>';
        }
        output += '</div></div>';
        $(this).append(output);
        field_id++;
      }
    },
    dragover: function(e) {
      var target = jQuery(e.target);
      if (cur_drag_item.is('.item') && target.is('.item') && !target.is('.is-dragging')) {
        if (target.is(':last-child')) {
          jQuery(e.target).after(cur_drag_item);
        } else {
          jQuery(e.target).before(cur_drag_item);
        }
      }
      return false;
    }
  });

});

function filter_string(value) {
  value = value.toLowerCase().replaceAll(' ', '_');
  value = value.replace(/\u00df/g, 'ss');
  value =...