JSFiddle - React, Tailwind, and code Playground

by adrianrosca

HTML

<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<div class="container">
    
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    
</div>

CSS

.container
{
    transform: scale(0.5);
    transform-origin: center top;
}


.item
{
    cursor: move;
    background: red;
    width: 8rem;
    height: 8rem;
    margin-bottom: 1rem;
}

JavaScript

var zoomScale = 0.5;


$(".container")
    .sortable(
        {
            start: function(e, ui)
            {
                // I guess somthing is needed here to fix the initial offset
            },
            sort: function(e, ui)
            {
                var changeLeft = ui.position.left - ui.originalPosition.left;
                var newLeft = ui.originalPosition.left + changeLeft / ((zoomScale));

                var changeTop = ui.position.top - ui.originalPosition.top;
                var newTop = ui.originalPosition.top + changeTop / zoomScale;

                ui.helper.css(
                {
                    left: newLeft,
                    top: newTop
                });                
            }
        });