JSFiddle - React, Tailwind, and code Playground

HTML

<div id="shelves">
    <div class="shelfRow">
        <div class="drop"></div>
        <div class="drop"><div class="boxArt" id="boxArt2">2</div></div>
        <div class="drop"></div>
        <div class="drop"></div>
        <div class="drop"></div>
        <div class="drop"></div>
        <div class="drop"></div>
        <div class="drop"></div>
        <div class="drop"></div>
        <div id="drop15"></div>
    </div>
    <div class="shelfRow">
        <div class="drop"><div class="boxArt" id="boxArt1">1</div></div>
        <div class="drop"></div>
        <div class="drop"></div>
        <div class="drop"></div>
        <div class="drop"></div>
        <div class="drop"></div>
        <div class="drop"></div>
        <div class="drop"></div>
        <div class="drop"></div>
        <div class="drop"></div>
    </div>
</div>

CSS

.shelfRow {
    width:1865px;
    height:280px;
}
#shelves {
    position:relative;
    width:950px;
    height:566px;
    background:#CCC;
    border:1px solid #333;
    overflow-y:hidden;
    overflow-x:auto;
}
.drop {
    width:155px;
    height:200px;
    padding:2px;
    margin-top:30px;
    margin-left:25px;
    float:left;
    position:relative;
}
.dropHover {
    padding:0px;
    border:2px solid #0C5F8B;
    -webkit-box-shadow: 0 0 3px 1px #0C5F8B;
    box-shadow: 0 0 3px 1px #0C5F8B;
    -moz-box-shadow: 0 0 20px #0C5F8B;
}
.boxArt {
    width:155px;
    height:200px;
    -webkit-box-shadow: 0 0 8px 1px #1F1F1F;
    box-shadow: 0 0 8px 1px #1F1F1F;
    -moz-box-shadow: 0 0 20px #1F1F1F;
    color:#000;
    background:#FFF;
}

JavaScript

var shelfOffset = $('#shelves').offset();
var dropMarginTop = parseInt($('.drop').css('marginTop'));
var dropMarginLeft = parseInt($('.drop').css('marginLeft'));

$('.drop').droppable({
  accept: function(el) {
    return $(this).children('.boxArt').length === 0 && el.hasClass('boxArt');
  },
  tolerance: 'intersect',
  hoverClass: 'dropHover',
  drop: function(event, ui) {
    ui.draggable.detach().appendTo($(this));

    var originalOffset = ui.draggable.data('originalOffset');
    console.log('originalOffset', originalOffset.top, originalOffset.left);

    var boxArt = $(this).children('div');
    var boxPosition = boxArt.position();
    console.log('boxArt position', boxPosition.top, boxPosition.left);

    var container = $(this);
    var containerPosition = container.position();
    console.log(container, containerPosition.top, containerPosition.left);

    var newTop = originalOffset.top + boxPosition.top - containerPosition.top - shelfOffset.top - dropMarginTop;
    var newLeft = originalOffset.left + boxPosition.left - containerPosition.left - shelfOffset.left - dropMarginLeft;


    console.log('new offset', newTop, newLeft);
    boxArt.css({top:newTop,left:newLeft}).animate({top:0,left:0});
  }
});

$('.boxArt').draggable({
  start: function(event, ui) {
    $(this).data('originalOffset', ui.offset);
  },
  revert: 'invalid'
});