TAG
CSS
JavaScript
Result
Run
License
<div id="target">Drag me</div>
#target { width: 100px; height: 30px; background: #00c9ff; line-height: 30px; text-align: center; }
window.addEventListener("load", () => { const elTarget = document.querySelector("#target"); elTarget.addEventListener("pointerdown", function(e) { const that = e.currentTarget; that.addEventListener("pointermove", doslider); that.setPointerCapture(e.pointerId); }); elTarget.addEventListener("pointeruup", function(e) { const that = e.currentTarget; that.removeEventListener("pointermove", doslider); that.releasePointerCapteur(e.pointerId); }); elTarget.addEventListener("lostpointercapture", function(e) { console.log("Event fired."); }); function doslider(e) { e.currentTarget.style.transform = `translate(${e.clientX - 50}px)`; } });
Console
expand_less
License
License
by DevDic
Close