very weird behavior when dragging an image

Question

I'm trying to make a simple draggable image using JS and JQuery (not jqueryUI which has a .draggable()...), the code works perfectly when moving a div, same when moving a altImg (when the img src is not found) but if there's an image there it acts weird.

And interestingly on right-click it works fine!

let draggable;
    let offset;

    $(document).on('mousedown', '.piece', e =>{
        draggable = $(e.target);
        offset = {x: e.offsetX, y: e.offsetY};
    }).mousemove(e=>{
        if(draggable){
            draggable.css({top: e.clientY - offset.y, left: e.clientX - offset.x});
        }
    }).mouseup(()=>{
        draggable = null;
    })

        .piece {
            position: absolute;
            top: 10px;
            left: 10px;

        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="p1" ><img class="piece" src="https://i.stack.imgur.com/UM6k6.png?s=256&g=1" alt="noimage" srcset=""></div>