JSFiddle - React, Tailwind, and code Playground

by Buddhi

HTML

<div id="out">

</div>
<div id="build-main">
  <div id="fieldslist" class="ui-widget-content">
    <ul>
      <li elName="fieldEl" class="">
        A
      </li>
      <li elName="fieldEl" class="">
        B
      </li>
      <li elName="fieldEl" class="">
        C
      </li>
    </ul>
  </div>

  <div id="subformdiv">

  </div>
  <div id="formBuilderSlide">

  </div>
</div>

CSS

#fieldslist {
          height: 150px;
          padding: 0.5em;
          background: #eee;
        }
        
        #subformdiv {
          height: 150px;
          padding: 0.5em;
          background: yellow;
        }
        
        #formBuilderSlide {
          height: 150px;
          padding: 0.5em;
          background: green;
        }
        
        #build-main {
          padding: 0.5em;
        }
        
        #out {
          height: 150px;
          padding: 0.5em;
          background: blue;
        }

JavaScript

$(function() {
          $("li[elName=fieldEl]").draggable({
            connectToSortable: $("#fieldsList,#subformdiv"),
            containment: $('#build-main'),
            appendTo: $("#formBuilderSlide"),
            helper: "clone",
            zIndex: 104,
            start: function() {},
            drag: function() {},
            revert: function() {}

          });
        });