JSFiddle - React, Tailwind, and code Playground

by tomasmrazko

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div class="new_item"></div>
<div class="body">
    
    <br><br>
    <div class="parent parent_1">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="parent parent_2">
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

CSS

* {
    box-sizing: border-box
}

.parent {
    width: 100%;
    height: 100px;
    padding: 0px
}

.parent_1 {
  background: red  
}

.parent_2 {
  background: blue
}

.new_item {
    width: 100px;
    height: 100px;
    background: orange;
}

.item {
    width: 100px;
    height: 100px;
    background: yellow;
    display: inline-block;
    margin-right: 5px
}

.placeholder {
    width: 100px;
    height: 100px;
    background: green;
    display: inline-block;
    margin-right: 5px
}

.body > .placeholder {
    width: 100%;
    height: 100px
}

JavaScript

$(document).ready(function(){
    parents_sortable();
    items_sortable();
    new_item_draggable();
})

function parents_sortable(){
  $(".body").sortable({ 
    items: ".parent, .item",
    placeholder: "placeholder",
    forcePlaceholderSize: true,
    //axis: "y",
    zIndex : 10000,
    tolerance : "pointer",
    start: function(e, ui){
        
    },
    sort: function(e, ui){

    },
    stop : function(event, ui) {
      
    },
    receive: function (event, ui) {
      obj_el = $(ui.item);

      if (obj_el.is(".new_item")) {

      } 
    } 
  }).disableSelection();        
}

function items_sortable(){
  $(".parent").sortable({ 
    items: ".item, .new_item",
    placeholder: "placeholder",
    forcePlaceholderSize: true,
    //axis: "y",
    zIndex : 10000,
    tolerance : "pointer",
      connectWith: ".parent, .body",
    start: function(e, ui){
        
    },
    sort: function(e, ui){

    },
    stop : function(event, ui) {
      
    },
    receive: function (event, ui) {

    } 
  }).disableSelection();        
}

function new_item_draggable(){
  $(".new_item").draggable({ 
    helper : "clone", 
    connectToSortable : ".body, .parent",
    start: function(event, ui) { 

    },
    drag: function(event, ui) { 

    },
    stop: function(event, ui) { 

    }
  });       
}