JSFiddle - React, Tailwind, and code Playground

by mohammed_techie

HTML

<body>


<div class="container">
  <div class="sortable-container">
    <div class="sortable-item">Sortable item 1</div>
    <div class="sortable-item">Sortable item 2</div>
    <div class="sortable-item">Sortable item 3</div>
    <div class="sortable-item">Sortable item ...</div>
    <div class="sortable-item">Sortable item ...</div>
    <div class="sortable-item">Sortable item ...</div>
    <div class="sortable-item">Sortable item ...</div>
    <div class="sortable-item">Sortable item ...</div>
    <div class="sortable-item">Sortable item ...</div>
    <div class="sortable-item">Sortable item ...</div>
    <div class="sortable-item">Sortable item ...</div>
    <div class="sortable-item">Sortable item ...</div>
  </div>

  <div>
    <div> some thing here</div>
    <div class = "draggable-container"> 
      <div class="draggable-item">Draggable item 1</div>
      <div class="draggable-item">Draggable item 2</div>
      <div class="draggable-item">Draggable item 3</div>
      <div class="draggable-item">Draggable item 4</div>
      <div class="draggable-item">Draggable item 5</div>
      <div class="draggable-item">Draggable item ...</div>
      <div class="draggable-item">Draggable item ...</div>
      <div class="draggable-item">Draggable item ...</div>
      <div class="draggable-item">Draggable item ...</div>
      <div class="draggable-item">Draggable item ...</div>
      <div class="draggable-item">Draggable item ...</div>
      <div class="draggable-item">Draggable item ...</div>
    </div>
  </div>
</div>
 
</body>

CSS

<style>
 
  .container { display: flex;}
  .sortable-container {border: 1px solid green; padding: 5px; margin: 12px; height: 150px; overflow-y: auto;}
  .draggable-container {border: 1px solid red; padding: 5px; margin: 10px;height: 150px; overflow-y: auto;}
  .sortable-item { width: 150px; border: 1px dotted; margin: 2px;cursor: pointer;}
  .draggable-item { width: 200px; border: 1px dotted; margin: 5px;cursor: pointer;}
  </style>

JavaScript

$( function() {
    $( ".sortable-container" ).sortable({
      
    });
    $( ".draggable-item" ).draggable({
      connectToSortable: ".sortable-container",
    
      scroll: true
    });
    
  } );