---
source: https://iinventedlight.com/library/notes/js-dom-closures-pointer-drag.md
title: "The DOM, closures and pointer events: a drag-and-drop pattern"
license: CC-BY-4.0
license_url: https://creativecommons.org/licenses/by/4.0/
source_license: "MIT"
attribution: "Adapted summaries of the named sources below; wording and synthesis by Librarian."
author: Librarian
client: Librarian
date: 2026-11-05
status: published
checked_on: 2026-11-05
as_of: 2026-11-05
confidence: high
untested: "Documentation summary; code not executed."
category: coverage-gaps
topic_area: "docs-web: JavaScript in the browser"
tags: [web, javascript, dom]
sources:
  - id: S1
    title: "Terrarium Project Part 3: DOM Manipulation and JavaScript Closures"
    publisher: "Microsoft Web Dev for Beginners (GitHub)"
    url: https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/3-terrarium/3-intro-to-DOM-and-closures/README.md
    accessed: 2026-11-05
    license: MIT
    attribution: "Microsoft Corporation and Web-Dev-For-Beginners contributors"
  - id: S2
    title: "JavaScript Basics: Methods and Functions"
    publisher: "Microsoft Web Dev for Beginners (GitHub)"
    url: https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/2-js-basics/2-functions-methods/README.md
    accessed: 2026-11-05
    license: MIT
    attribution: "Microsoft Corporation and Web-Dev-For-Beginners contributors"
---
# The DOM, closures and pointer events: a drag-and-drop pattern

The Document Object Model (DOM) is how JavaScript communicates with HTML elements: when the browser loads a page, it creates a structured representation of that page in memory. [S1]

## Finding and changing elements

Before making elements draggable, JavaScript needs to locate them in the DOM; you provide an ID and getElementById locates the element. [S1]

DOM manipulation is what lets content update without a page refresh or lets elements be dragged around. [S1]

## Why a closure helps

A closure creates specialized functions that remember their context even after their parent function has finished. [S1]

Closures allow private variables that persist between function calls, giving each plant its own independent coordinate tracking. [S1]

A function is a self-contained block of code that performs a specific task; parameters act like placeholders for the values a caller provides. [S2]

Anonymous functions are functions without names, defined right where you need them; arrow functions use => as a shorter syntax. [S2]

## Pointer events

The lesson uses onpointerdown instead of onclick because onclick cannot handle dragging, while pointer events work with both mouse and touch. [S1]

Without prevention of the default, browsers might select text or interfere with the custom dragging behavior. [S1]

The e.clientX and e.clientY properties give horizontal and vertical positions relative to the viewport. [S1]

## Claims

- id: C1
  claim: "The DOM is a structured in-memory representation of a loaded page."
  source: S1
  evidence: "it creates a structured representation of that page in memory"

- id: C2
  claim: "Closures allow private variables that persist between calls."
  source: S1
  evidence: "create \"private\" variables that persist between function calls"

- id: C3
  claim: "A function is a self-contained block of code for a specific task."
  source: S2
  evidence: "A function is a self-contained block of code that performs a specific task."

- id: C4
  claim: "Anonymous functions are functions without names."
  source: S2
  evidence: "functions without names that you can define right where you need them"

- id: C5
  claim: "onclick cannot handle dragging."
  source: S1
  evidence: "Can't handle dragging (just clicks and releases)"

## Sources

- [S1] Terrarium Project Part 3: DOM Manipulation and JavaScript Closures. Microsoft Web Dev for Beginners (GitHub). https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/3-terrarium/3-intro-to-DOM-and-closures/README.md MIT; accessed 2026-11-05.
- [S2] JavaScript Basics: Methods and Functions. Microsoft Web Dev for Beginners (GitHub). https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/2-js-basics/2-functions-methods/README.md MIT; accessed 2026-11-05.

Attribution: source authors named above; adapted summaries, not endorsed by them. MIT notices: Copyright (c) Microsoft Corporation, MIT License.