'Modify original Position on jQuery ui Drag & Drop

I have an application with multiple stack of card, I would like to have a drag&drop ability between these stacks. These stacks have a different layout in term of offset relative to the parent element. I simplified to the max in this fiddle https://jsfiddle.net/dtghbo7f/

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Crapette HTML 5 + jQuery</title>
        <style type="text/css">
            .card, .box {
  width: 71px;
  height: 96px;
  position: absolute;
}
#box1 {
  top:31px;
  left:25px;
}
#box2 {
  top:31px;
  left:255px;
}
.card {
 background-image: url[...]
}
.box {
  background-position: -1px -1px;
  background-image: url[...]
}
        </style>
        <script src="jquery.min.js"></script>
        <script src="jquery-ui.js"></script>
        <script>
$("body").ready(function() {
    $('<div>').attr('id','card0').addClass('card').appendTo($('#box1'));
    for(let i=1;i<7;i++){
    $('<div>').attr('id','card'+i).addClass('card').appendTo($('#box1 div.card:not(:has(*))')).css('top',5).css('left',5);
  }
  $('<div>').attr('id','card7').addClass('card').appendTo($('#box2'));
    for(let i=1;i<7;i++){
    $('<div>').attr('id','card'+(i+7)).addClass('card').appendTo($('#box2 div.card:not(:has(*))')).css('top',15);
  }
  $(".card").draggable({
        revert: true,//'invalid',
        revertDuration: 500,
        
        start: function(event, ui) {
            $(this).parents(".box").css('z-index',2);
        },
        drag: function(event, ui) {
        },
        stop: function(event, ui) {
            $(".box").css('z-index',1);
            if($(this).parents('.box').attr('id') == 'box1') {
                $(this).css('top',5).css('left',5);
            } else {
                $(this).css('top',15).css('left',0);
            }
      
        },
    });
    $(".box, .card").droppable({
        activate: function( event, ui ) {return false;},
        drop: function( event, ui ) {
            let source_offset = ui.draggable.parent().offset();
            let destination_offset = $(this).offset();
            $(this)
                .append(ui.draggable);
            ui.draggable
                .css('top', parseInt(ui.draggable.css('top')) + parseInt(source_offset.top) - parseInt(destination_offset.top))
                .css('left', parseInt(ui.draggable.css('left')) + parseInt(source_offset.left) - parseInt(destination_offset.left));
            console.log(ui.draggable.css('top'), ui.draggable.css('left'));
            $('.card, .box').droppable('enable');
            $('.card:has(*), .box:has(*)').droppable('disable');
        },
    });
    $('.card, .box').droppable('enable');
    $('.card:has(*), .box:has(*)').droppable('disable');
});
        </script>
    </head>
    <body>
    <div id='box1' class='box'>
    </div>
    <div id='box2' class='box'>
    </div>
    </body>
</html>

As you can see, when you drop a card on the other stack, the revert options move the card to the original position relative to the parent. As this offset change on different stack, I would like to be able to modify this originalPosition when the droppable stack is determined. Can you help me ?

jquery-ui drag-and-drop

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Modify original Position on jQuery ui Drag & Drop

Sources

Related Questions