JSFiddle - React, Tailwind, and code Playground

by Anas Zaki

HTML

<div id="container">    
        <div>
            <a href="#somelink1" class="link1">Link 1</a>
        </div>  
      
    <div class="me">test </div>
    <div class="me">test </div>
    </div>

CSS

div:not(#container) {
        border:1px solid orange;
    }
    #container {
        padding:20px;
        margin:10px;
        float: left; /* needed for containment option */
        width: 336px;
        height: auto;
    }
    #container div {
        margin: 4px;
        padding: 0px;
        float: left;
        width: 100px;
        height: 90px;
        text-align: center;
    }
    .link1{
        color: purple;   
    }
    .link2{
        color: red;   
    }
    .link3{
        color: green;   
    }

JavaScript

$(function () {
        $('#container div').draggable({
            containment: "#container",
            helper: 'clone',
            snap: true,
            snapMode: 'inner',
            snapTolerance: 32,
            revert: 'invalid'
        });
    
        $('#container .me').droppable({
            hoverClass: 'ui-state-highlight',
            drop: function (event, ui) {
                var _drop = $(this), 
                    _drag = $(ui.draggable),
                   _dropChildren = _drop.children(), //original drop children
                   _dragChilden = _drag.children(); //original drag children
                
                if(_dropChildren.length > 0){
                   _dropChildren.appendTo(_drag);
                }
                
               // _dragChilden.appendTo(_drop);
            }
        });
    });