JSFiddle - React, Tailwind, and code Playground

by nivea75ml

HTML

<div class="demo">

        <div id="droppable">
            
        </div>
        <div id="draggableElements">
            <div class="draggable">
                <p>S1</p>
            </div>
            <div class="draggable">
                <p>S2</p>
            </div>
            <div class="draggable">
                <p>S3</p>
            </div>
            
        </div>
    </div>

CSS

.draggable{
        width: 25px;
        height: 25px;
                padding: 0.5em;
                
                background:#090;

                margin:10px 10px;
    }
        
        #draggableElements{
                
                
                position:absolute;
                width:800px;            
        }
        
        #draggableElements > div { float: left; }
    
    #droppable{
        background-color: #ccc;
        height:573px;
        margin-bottom: 22px;
                
    }

        .demo{
            background-color:#fefefe;
            border: 1px solid #eee;
            
            padding:15px;
            
            width:820px;
            height:640px;
            
            margin: 50px auto;

        }

JavaScript

$(function() {
               
                $("#draggableElements").sortable({
                        revert: true,
                        connectWith: "#droppable",
                        placeholder: "ui-draggable"
                    });
       
                $( ".draggable" ).draggable({
                        revert: "invalid",
                        cursor:'move',
                        containment: ".demo",

                });

                $( "#droppable" ).droppable({ accept: '.draggable' });
                
        });