JSFiddle - React, Tailwind, and code Playground

HTML

<div id="d1"> 1</div>
<div id="d2"> 2</div>

<span id="target"></span>

CSS

div { width: 200px; height: 100px; border: 2px solid black; }
* { -ms-user-select: none; -moz-user-select: none; -webkit-user-select: none; user-select: none; }

JavaScript

var d1 = document.querySelector("#d1");
var d2 = document.querySelector("#d2");
var log = document.querySelector("#target");

d1.addEventListener("pointerdown", function(e) {
    d1.setPointerCapture(e.pointerId);
    setTimeout(changeCapture,1000,e.pointerId);
});
                    
function changeCapture(id) {
    d2.releasePointerCapture(id);   
    console.log('released');
}

window.addEventListener("pointermove", function(e) {
    log.textContent = e.target.id;
});