JSFiddle - React, Tailwind, and code Playground

by Trevor Dowdle

HTML

<div class="dragdrop" data-place="10">1</div>
  <div class="dragdrop" data-place="15">2</div>
  <div class="dragdrop" data-place="25">3</div>
  <div class="dragdrop" data-place="30">4</div>
  <div class="dragdrop" data-place="35">5</div>

CSS

.dragdrop {
background:red;
margin:15px;
width:100px;

}
.ui-state-hover {
background:lightyellow;   
}
.ui-state-active {
background:lightgray   
}

JavaScript

$( ".dragdrop" ).draggable({ revert: true, helper: "clone" });

$( ".dragdrop" ).droppable({
    accept: ".dragdrop",
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active",
    drop: function( event, ui ) {

        var draggable = ui.draggable, droppable = $(this),
            dragPos = draggable.position(), dropPos = droppable.position();
        
        draggable.css({
            left: dropPos.left+'px',
            top: dropPos.top+'px'
        });

        droppable.css({
            left: dragPos.left+'px',
            top: dragPos.top+'px'
        });
        var a = $(ui.draggable);
		var b = $(this);
        var a_place = a.html();
        var b_place = b.html();
        
        b.html(a_place);
		a.html(b_place);
        
        //draggable.swap(droppable);
    }
});