Draggable Sticky Note
Home
Snippets
Draggable Sticky Note
HTML
CSS
JS
<div class="sticky-note" id="note"> <textarea placeholder="Type something...">Draggable Sticky Note</textarea> </div>
body { margin: 0; background: #fafafa; height: 100vh; font-family: Arial, sans-serif; display: flex; align-items: center; justify-content: center; } .sticky-note { position: absolute; width: 200px; min-height: 150px; background: #fffacd; box-shadow: 3px 3px 10px rgba(0,0,0,0.2); border: 1px solid #eee; padding: 10px; cursor: move; resize:both; border-radius: 6px; overflow: hidden; } .sticky-note textarea { width: 100%; height: 100%; border: none; background: transparent; resize: none; font-size: 14px; color: #333; outline: none; }
const note = document.getElementById("note"); let isDragging = false; let offsetX, offsetY; note.addEventListener("mousedown", (e) => { if (e.target.tagName === "TEXTAREA") return; isDragging = true; offsetX = e.clientX - note.offsetLeft; offsetY = e.clientY - note.offsetTop; }); document.addEventListener("mousemove", (e) => { if (!isDragging) return; note.style.left = e.clientX - offsetX + "px"; note.style.top = e.clientY - offsetY + "px"; }); document.addEventListener("mouseup", () => { isDragging = false; });
Ad #1
Ad #2
Scroll to Top