JSFiddle - React, Tailwind, and code Playground

by booktu8

HTML

<div class="droppable"></div>
<div class="drag"></div>

CSS

.droppable {
    width: 200px;
    height: 200px;
    transform: scale(1);    
    background-color: #C3C3C3;
}

.drag {
    background-color: black;
    width: 20px;
    height: 20px;
    z-index: 10;
    position: absolute;
    top: 10px;
    left: 350px;    
}

JavaScript

/*
Drag black rectangle into droppable area. 
If it is dropped inside bounds of unzoomed droppable (x < 200, y < 200) then its dropped properly.
But try to drop rectangle close to right edge of droppable - it is not dropped in droppable.
So if droppable is zoomed, it still uses original dimensions for droppable.
*/

$('.drag').draggable({

});

$('.droppable').droppable({
    out: function() {
      $('.drag').css('background-color', 'red');
    },
    
    drop: function() {
      $('.drag').css('background-color', 'green');
    },
});