Summary  
This chapter shows how to leverage the native Drag & Drop API to make elements draggable, handle drag events, and dynamically update element positions in the document.  

General domain of usage  
Image galleries

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJzdHlsZS5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGgyPkRyYWctYW5kLURyb3AgSW1hZ2UgR2FsbGVyeTwvaDI+CiAgICA8cD5EcmFnIGFueSBpbWFnZSB0byByZWFycmFuZ2UgdGhlIGdhbGxlcnkgb3JkZXIuPC9wPgogICAgPGRpdiBjbGFzcz0iZ2FsbGVyeSIgaWQ9ImdhbGxlcnkiPgogICAgICA8aW1nCiAgICAgICAgc3JjPSJodHRwczovL2ltYWdlcy51bnNwbGFzaC5jb20vcGhvdG8tMTUwNjc0NDAzODEzNi00NjI3MzgzNGIzZmI/YXV0bz1mb3JtYXQmZml0PWNyb3Amdz00MDAmcT04MCIKICAgICAgICBkcmFnZ2FibGU9InRydWUiCiAgICAgICAgYWx0PSJGb3Jlc3QiCiAgICAgIC8+CiAgICAgIDxpbWcKICAgICAgICBzcmM9Imh0dHBzOi8vaW1hZ2VzLnVuc3BsYXNoLmNvbS9waG90by0xNTE5MTI1MzIzMzk4LTY3NWYwZGRiNjMwOD9hdXRvPWZvcm1hdCZmaXQ9Y3JvcCZ3PTQwMCZxPTgwIgogICAgICAgIGRyYWdnYWJsZT0idHJ1ZSIKICAgICAgICBhbHQ9IkJlYWNoIgogICAgICAvPgogICAgICA8aW1nCiAgICAgICAgc3JjPSJodHRwczovL2ltYWdlcy51bnNwbGFzaC5jb20vcGhvdG8tMTQ2NTEwMTA0NjUzMC03MzM5OGM3ZjI4Y2E/YXV0bz1mb3JtYXQmZml0PWNyb3Amdz00MDAmcT04MCIKICAgICAgICBkcmFnZ2FibGU9InRydWUiCiAgICAgICAgYWx0PSJTa3kiCiAgICAgIC8+CiAgICAgIDxpbWcKICAgICAgICBzcmM9Imh0dHBzOi8vaW1hZ2VzLnVuc3BsYXNoLmNvbS9waG90by0xNzY0MzUxNDUxMDkxLWYzNzNhNGEyMTExOT9hdXRvPWZvcm1hdCZmaXQ9Y3JvcCZ3PTQwMCZxPTgwIgogICAgICAgIGRyYWdnYWJsZT0idHJ1ZSIKICAgICAgICBhbHQ9Ik1vb24iCiAgICAgIC8+CiAgICA8L2Rpdj4KICAgIDxzY3JpcHQgc3JjPSJzY3JpcHQuanMiPjwvc2NyaXB0PgogIDwvYm9keT4KPC9odG1sPg==

Ym9keSB7CiAgZm9udC1mYW1pbHk6IHNhbnMtc2VyaWY7CiAgYmFja2dyb3VuZDogI2YyZjJmMjsKICBtYXJnaW46IDA7CiAgcGFkZGluZzogNDBweDsKfQouZ2FsbGVyeSB7CiAgZGlzcGxheTogZmxleDsKCiAgZmxleC13cmFwOiB3cmFwOwogIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjsKICBtYXgtd2lkdGg6IDYwMHB4OwogIG1hcmdpbjogYXV0bzsKICBiYWNrZ3JvdW5kOiAjZmZmOwogIHBhZGRpbmc6IDEwcHg7CiAgYm9yZGVyLXJhZGl1czogMTJweDsKICBib3gtc2hhZG93OiAwIDJweCA4cHggcmdiYSgwLCAwLCAwLCAwLjA2KTsKfQouZ2FsbGVyeSBpbWcgewogIHdpZHRoOiAxMjBweDsKICBoZWlnaHQ6IDkwcHg7CiAgb2JqZWN0LWZpdDogY292ZXI7CiAgYm9yZGVyOiAycHggc29saWQgdHJhbnNwYXJlbnQ7CiAgYm9yZGVyLXJhZGl1czogOHB4OwogIGN1cnNvcjogZ3JhYjsKICB0cmFuc2l0aW9uOiBib3JkZXIgMC4yczsKICBiYWNrZ3JvdW5kOiAjZWVlOwp9Ci5nYWxsZXJ5IGltZy5kcmFnZ2luZyB7CiAgb3BhY2l0eTogMC41OwogIGJvcmRlci1jb2xvcjogIzAwNzdmZjsKfQouZ2FsbGVyeSBpbWcub3ZlciB7CiAgYm9yZGVyLWNvbG9yOiAjZmZhNjAwOwp9

Y29uc3QgZ2FsbGVyeSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJnYWxsZXJ5Iik7CmxldCBkcmFnZ2luZ0ltZyA9IG51bGw7CgpnYWxsZXJ5LmFkZEV2ZW50TGlzdGVuZXIoImRyYWdzdGFydCIsIChlKSA9PiB7CiAgaWYgKGUudGFyZ2V0LnRhZ05hbWUgPT09ICJJTUciKSB7CiAgICBkcmFnZ2luZ0ltZyA9IGUudGFyZ2V0OwogICAgZS50YXJnZXQuY2xhc3NMaXN0LmFkZCgiZHJhZ2dpbmciKTsKICAgIGUuZGF0YVRyYW5zZmVyLmVmZmVjdEFsbG93ZWQgPSAibW92ZSI7CiAgfQp9KTsKCmdhbGxlcnkuYWRkRXZlbnRMaXN0ZW5lcigiZHJhZ2VuZCIsIChlKSA9PiB7CiAgaWYgKGUudGFyZ2V0LnRhZ05hbWUgPT09ICJJTUciKSB7CiAgICBlLnRhcmdldC5jbGFzc0xpc3QucmVtb3ZlKCJkcmFnZ2luZyIpOwogICAgZHJhZ2dpbmdJbWcgPSBudWxsOwogICAgQXJyYXkuZnJvbShnYWxsZXJ5LmNoaWxkcmVuKS5mb3JFYWNoKChpbWcpID0+IGltZy5jbGFzc0xpc3QucmVtb3ZlKCJvdmVyIikpOwogIH0KfSk7CgpnYWxsZXJ5LmFkZEV2ZW50TGlzdGVuZXIoImRyYWdvdmVyIiwgKGUpID0+IHsKICBlLnByZXZlbnREZWZhdWx0KCk7CiAgY29uc3QgdGFyZ2V0ID0gZS50YXJnZXQ7CiAgaWYgKHRhcmdldC50YWdOYW1lID09PSAiSU1HIiAmJiB0YXJnZXQgIT09IGRyYWdnaW5nSW1nKSB7CiAgICB0YXJnZXQuY2xhc3NMaXN0LmFkZCgib3ZlciIpOwogIH0KfSk7CgpnYWxsZXJ5LmFkZEV2ZW50TGlzdGVuZXIoImRyYWdsZWF2ZSIsIChlKSA9PiB7CiAgaWYgKGUudGFyZ2V0LnRhZ05hbWUgPT09ICJJTUciKSB7CiAgICBlLnRhcmdldC5jbGFzc0xpc3QucmVtb3ZlKCJvdmVyIik7CiAgfQp9KTsKCmdhbGxlcnkuYWRkRXZlbnRMaXN0ZW5lcigiZHJvcCIsIChlKSA9PiB7CiAgZS5wcmV2ZW50RGVmYXVsdCgpOwogIGNvbnN0IHRhcmdldCA9IGUudGFyZ2V0OwogIGlmICh0YXJnZXQudGFnTmFtZSA9PT0gIklNRyIgJiYgdGFyZ2V0ICE9PSBkcmFnZ2luZ0ltZykgewogICAgdGFyZ2V0LmNsYXNzTGlzdC5yZW1vdmUoIm92ZXIiKTsKICAgIGNvbnN0IGltZ3MgPSBBcnJheS5mcm9tKGdhbGxlcnkuY2hpbGRyZW4pOwogICAgY29uc3QgZHJhZ2dpbmdJbmRleCA9IGltZ3MuaW5kZXhPZihkcmFnZ2luZ0ltZyk7CiAgICBjb25zdCB0YXJnZXRJbmRleCA9IGltZ3MuaW5kZXhPZih0YXJnZXQpOwogICAgaWYgKGRyYWdnaW5nSW5kZXggPCB0YXJnZXRJbmRleCkgewogICAgICBnYWxsZXJ5Lmluc2VydEJlZm9yZShkcmFnZ2luZ0ltZywgdGFyZ2V0Lm5leHRTaWJsaW5nKTsKICAgIH0gZWxzZSB7CiAgICAgIGdhbGxlcnkuaW5zZXJ0QmVmb3JlKGRyYWdnaW5nSW1nLCB0YXJnZXQpOwogICAgfQogIH0KfSk7

Building a drag-and-drop image gallery combines your knowledge of  API and user interaction to create a practical, visually engaging mini-project. You will design a gallery that displays several images, allowing users to rearrange them by simply dragging and dropping. This approach uses the native Drag & Drop API, which provides a smooth, interactive experience without requiring extra libraries. The project includes:
- Display multiple images in a grid or row;
- Allow users to drag any image and drop it in a new position within the gallery;
- Visually indicate the image being dragged and the potential drop target.

What is one benefit of providing custom visual feedback during drag-and-drop interactions?

Explore the most useful web APIs. Learn to work with drag and drop, clipboard access, fullscreen mode, storage APIs, file uploads, and geolocation to create interactive and engaging web features. Reinforce your skills with hands-on mini projects that put each API into practice.

Gain a clear understanding of what modern HTML APIs offer and how they unlock rich interactive capabilities in the browser. Explore foundational concepts and experiment with the Drag and Drop API to build your first interactive elements.

Learn how to access and control the clipboard to read and write user data safely. Then explore the Fullscreen API to create immersive experiences and handle fullscreen state changes with ease.

Learn to work with some of the most powerful browser APIs for managing data and interacting with the user's device. Store information persistently with Web Storage, handle file uploads and previews directly in the browser, and access geolocation data to build personalized, context-aware experiences.

Customizing Drag & Drop Interactions

Customizing Drag & Drop Interactions