04Drag a file into a folder
Hovering a dragged file over a folder lights it up with a ring, and releasing genuinely moves the row inside that folder.
Best forTidy-up screens for asset libraries, upload inboxes, and image galleries where files get sorted by dragging
pointer eventselementFromPointEscape
<main class="stage">
<div class="dg is-demo" id="dg">
<ul class="dg__list" id="dg-list" role="tree" aria-label="files" tabindex="0" aria-activedescendant="dg-f1">
<li class="dg__f" id="dg-f1" role="treeitem" aria-level="1" aria-expanded="false">
<div class="dg__row dg__row--f" data-hit>
<span class="dg__ico dg__ico--folder" aria-hidden="true"><svg viewBox="0 0 256 256" width="14" height="14"><g fill="currentColor"><path d="M128 80H32V56a8 8 0 0 1 8-8h52.69a8 8 0 0 1 5.65 2.34Z" opacity=".2"/><path d="M216 72h-84.69L104 44.69A15.86 15.86 0 0 0 92.69 40H40a16 16 0 0 0-16 16v144.62A15.4 15.4 0 0 0 39.38 216h177.51A15.13 15.13 0 0 0 232 200.89V88a16 16 0 0 0-16-16M92.69 56l16 16H40V56ZM216 200H40V88h176Z"/></g></svg></span>
<span class="dg__name">uploads</span>
<span class="dg__n" aria-label="0">0</span>
</div>
<div class="dg__kids"><div class="dg__kwrap"><ul role="group" aria-label="uploads"></ul></div></div>
</li>
<li class="dg__f" id="dg-f2" role="treeitem" aria-level="1" aria-expanded="false">
<div class="dg__row dg__row--f" data-hit>
<span class="dg__ico dg__ico--folder" aria-hidden="true"><svg viewBox="0 0 256 256" width="14" height="14"><g fill="currentColor"><path d="M128 80H32V56a8 8 0 0 1 8-8h52.69a8 8 0 0 1 5.65 2.34Z" opacity=".2"/><path d="M216 72h-84.69L104 44.69A15.86 15.86 0 0 0 92.69 40H40a16 16 0 0 0-16 16v144.62A15.4 15.4 0 0 0 39.38 216h177.51A15.13 15.13 0 0 0 232 200.89V88a16 16 0 0 0-16-16M92.69 56l16 16H40V56ZM216 200H40V88h176Z"/></g></svg></span>
<span class="dg__name">archive</span>
<span class="dg__n" aria-label="0">0</span>
</div>
<div class="dg__kids"><div class="dg__kwrap"><ul role="group" aria-label="archive"></ul></div></div>
</li>
<li class="dg__i" id="dg-i1" role="treeitem" aria-level="1" aria-label="drag photo-01.jpg into a folder">
<div class="dg__row" data-hit tabindex="-1">
<span class="dg__ico" aria-hidden="true"><svg viewBox="0 0 256 256" width="13" height="13"><g fill="currentColor"><path d="m104 152l48 72H24l36-56l16.36 25.45Zm48-120v56h56Z" opacity=".2"/><path d="M110.66 147.56a8 8 0 0 0-13.32 0l-20.85 31.29l-9.76-15.18a8 8 0 0 0-13.46 0l-36 56A8 8 0 0 0 24 232h128a8 8 0 0 0 6.66-12.44ZM38.65 216L60 182.79l9.63 15a8 8 0 0 0 13.39.11l21-31.47L137.05 216Zm175-133.66l-56-56A8 8 0 0 0 152 24H56a16 16 0 0 0-16 16v88a8 8 0 0 0 16 0V40h88v48a8 8 0 0 0 8 8h48v120h-8a8 8 0 0 0 0 16h8a16 16 0 0 0 16-16V88a8 8 0 0 0-2.34-5.66ZM160 51.31L188.69 80H160Z"/></g></svg></span>
<span class="dg__name">photo-01.jpg</span>
</div>
</li>
<li class="dg__i" id="dg-i2" role="treeitem" aria-level="1" aria-label="drag report.pdf into a folder">
<div class="dg__row" data-hit tabindex="-1">
<span class="dg__ico" aria-hidden="true"><svg viewBox="0 0 256 256" width="13" height="13"><g fill="currentColor"><path d="M208 88h-56V32Z" opacity=".2"/><path d="M52 144H36a8 8 0 0 0-8 8v56a8 8 0 0 0 8 8h16a36 36 0 0 0 0-72m0 56h-8v-40h8a20 20 0 0 1 0 40m169.53-4.91a8 8 0 0 1 .25 11.31A30.06 30.06 0 0 1 200 216c-17.65 0-32-16.15-32-36s14.35-36 32-36a30.06 30.06 0 0 1 21.78 9.6a8 8 0 0 1-11.56 11.06A14.24 14.24 0 0 0 200 160c-8.82 0-16 9-16 20s7.18 20 16 20a14.18 14.18 0 0 0 10.22-4.66a8 8 0 0 1 11.31-.25M128 144c-17.64 0-32 16.15-32 36s14.36 36 32 36s32-16.15 32-36s-14.36-36-32-36m0 56c-8.82 0-16-9-16-20s7.18-20 16-20s16 9 16 20s-7.18 20-16 20m-80-80a8 8 0 0 0 8-8V40h88v48a8 8 0 0 0 8 8h48v16a8 8 0 0 0 16 0V88a8 8 0 0 0-2.34-5.66l-56-56A8 8 0 0 0 152 24H56a16 16 0 0 0-16 16v72a8 8 0 0 0 8 8m112-68.69L188.69 80H160Z"/></g></svg></span>
<span class="dg__name">report.pdf</span>
</div>
</li>
<li class="dg__i" id="dg-i3" role="treeitem" aria-level="1" aria-label="drag data.zip into a folder">
<div class="dg__row" data-hit tabindex="-1">
<span class="dg__ico" aria-hidden="true"><svg viewBox="0 0 256 256" width="13" height="13"><g fill="currentColor"><path d="M208 88h-56V32Z" opacity=".2"/><path d="M184 144h-16a8 8 0 0 0-8 8v56a8 8 0 0 0 16 0v-8h8a28 28 0 0 0 0-56m0 40h-8v-24h8a12 12 0 0 1 0 24m-48-32v56a8 8 0 0 1-16 0v-56a8 8 0 0 1 16 0m-40 56a8 8 0 0 1-8 8H56a8 8 0 0 1-7-12l25.16-44H56a8 8 0 0 1 0-16h32a8 8 0 0 1 7 12l-25.21 44H88a8 8 0 0 1 8 8M213.66 82.34l-56-56A8 8 0 0 0 152 24H56a16 16 0 0 0-16 16v72a8 8 0 0 0 16 0V40h88v48a8 8 0 0 0 8 8h48v16a8 8 0 0 0 16 0V88a8 8 0 0 0-2.34-5.66M160 80V51.31L188.69 80Z"/></g></svg></span>
<span class="dg__name">data.zip</span>
</div>
</li>
</ul>
<div class="dg__after" aria-hidden="true">
<ul>
<li><div class="dg__row dg__row--f dg__row--flash">
<span class="dg__ico dg__ico--folder"><svg viewBox="0 0 256 256" width="14" height="14"><g fill="currentColor"><path d="M128 80H32V56a8 8 0 0 1 8-8h52.69a8 8 0 0 1 5.65 2.34Z" opacity=".2"/><path d="M216 72h-84.69L104 44.69A15.86 15.86 0 0 0 92.69 40H40a16 16 0 0 0-16 16v144.62A15.4 15.4 0 0 0 39.38 216h177.51A15.13 15.13 0 0 0 232 200.89V88a16 16 0 0 0-16-16M92.69 56l16 16H40V56ZM216 200H40V88h176Z"/></g></svg></span>
<span class="dg__name">uploads</span>
<span class="dg__n dg__n--on">1</span>
</div>
<ul class="dg__inkids"><li><div class="dg__row dg__row--in">
<span class="dg__ico"><svg viewBox="0 0 256 256" width="13" height="13"><g fill="currentColor"><path d="m104 152l48 72H24l36-56l16.36 25.45Zm48-120v56h56Z" opacity=".2"/><path d="M110.66 147.56a8 8 0 0 0-13.32 0l-20.85 31.29l-9.76-15.18a8 8 0 0 0-13.46 0l-36 56A8 8 0 0 0 24 232h128a8 8 0 0 0 6.66-12.44ZM38.65 216L60 182.79l9.63 15a8 8 0 0 0 13.39.11l21-31.47L137.05 216Zm175-133.66l-56-56A8 8 0 0 0 152 24H56a16 16 0 0 0-16 16v88a8 8 0 0 0 16 0V40h88v48a8 8 0 0 0 8 8h48v120h-8a8 8 0 0 0 0 16h8a16 16 0 0 0 16-16V88a8 8 0 0 0-2.34-5.66ZM160 51.31L188.69 80H160Z"/></g></svg></span>
<span class="dg__name">photo-01.jpg</span>
</div></li></ul></li>
<li><div class="dg__row dg__row--f">
<span class="dg__ico dg__ico--folder"><svg viewBox="0 0 256 256" width="14" height="14"><g fill="currentColor"><path d="M128 80H32V56a8 8 0 0 1 8-8h52.69a8 8 0 0 1 5.65 2.34Z" opacity=".2"/><path d="M216 72h-84.69L104 44.69A15.86 15.86 0 0 0 92.69 40H40a16 16 0 0 0-16 16v144.62A15.4 15.4 0 0 0 39.38 216h177.51A15.13 15.13 0 0 0 232 200.89V88a16 16 0 0 0-16-16M92.69 56l16 16H40V56ZM216 200H40V88h176Z"/></g></svg></span>
<span class="dg__name">archive</span>
<span class="dg__n">0</span>
</div></li>
<li><div class="dg__row">
<span class="dg__ico"><svg viewBox="0 0 256 256" width="13" height="13"><g fill="currentColor"><path d="M208 88h-56V32Z" opacity=".2"/><path d="M52 144H36a8 8 0 0 0-8 8v56a8 8 0 0 0 8 8h16a36 36 0 0 0 0-72m0 56h-8v-40h8a20 20 0 0 1 0 40m169.53-4.91a8 8 0 0 1 .25 11.31A30.06 30.06 0 0 1 200 216c-17.65 0-32-16.15-32-36s14.35-36 32-36a30.06 30.06 0 0 1 21.78 9.6a8 8 0 0 1-11.56 11.06A14.24 14.24 0 0 0 200 160c-8.82 0-16 9-16 20s7.18 20 16 20a14.18 14.18 0 0 0 10.22-4.66a8 8 0 0 1 11.31-.25M128 144c-17.64 0-32 16.15-32 36s14.36 36 32 36s32-16.15 32-36s-14.36-36-32-36m0 56c-8.82 0-16-9-16-20s7.18-20 16-20s16 9 16 20s-7.18 20-16 20m-80-80a8 8 0 0 0 8-8V40h88v48a8 8 0 0 0 8 8h48v16a8 8 0 0 0 16 0V88a8 8 0 0 0-2.34-5.66l-56-56A8 8 0 0 0 152 24H56a16 16 0 0 0-16 16v72a8 8 0 0 0 8 8m112-68.69L188.69 80H160Z"/></g></svg></span>
<span class="dg__name">report.pdf</span>
</div></li>
<li><div class="dg__row">
<span class="dg__ico"><svg viewBox="0 0 256 256" width="13" height="13"><g fill="currentColor"><path d="M208 88h-56V32Z" opacity=".2"/><path d="M184 144h-16a8 8 0 0 0-8 8v56a8 8 0 0 0 16 0v-8h8a28 28 0 0 0 0-56m0 40h-8v-24h8a12 12 0 0 1 0 24m-48-32v56a8 8 0 0 1-16 0v-56a8 8 0 0 1 16 0m-40 56a8 8 0 0 1-8 8H56a8 8 0 0 1-7-12l25.16-44H56a8 8 0 0 1 0-16h32a8 8 0 0 1 7 12l-25.21 44H88a8 8 0 0 1 8 8M213.66 82.34l-56-56A8 8 0 0 0 152 24H56a16 16 0 0 0-16 16v72a8 8 0 0 0 16 0V40h88v48a8 8 0 0 0 8 8h48v16a8 8 0 0 0 16 0V88a8 8 0 0 0-2.34-5.66M160 80V51.31L188.69 80Z"/></g></svg></span>
<span class="dg__name">data.zip</span>
</div></li>
</ul>
</div>
<div class="dg__ghost" aria-hidden="true">
<span class="dg__ico"><svg viewBox="0 0 256 256" width="13" height="13"><g fill="currentColor"><path d="m104 152l48 72H24l36-56l16.36 25.45Zm48-120v56h56Z" opacity=".2"/><path d="M110.66 147.56a8 8 0 0 0-13.32 0l-20.85 31.29l-9.76-15.18a8 8 0 0 0-13.46 0l-36 56A8 8 0 0 0 24 232h128a8 8 0 0 0 6.66-12.44ZM38.65 216L60 182.79l9.63 15a8 8 0 0 0 13.39.11l21-31.47L137.05 216Zm175-133.66l-56-56A8 8 0 0 0 152 24H56a16 16 0 0 0-16 16v88a8 8 0 0 0 16 0V40h88v48a8 8 0 0 0 8 8h48v120h-8a8 8 0 0 0 0 16h8a16 16 0 0 0 16-16V88a8 8 0 0 0-2.34-5.66ZM160 51.31L188.69 80H160Z"/></g></svg></span>
photo-01.jpg
</div>
</div>
</main>@use "../../../../site/static/demo-tokens" as *;
$duration: $dur-quick;
$easing: $ease-spring;
$color: $subject-blue;
@include stage($stage-paper);
.dg {
position: relative;
box-sizing: border-box;
width: min(268px, 88vw);
font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
color: $stage-ink;
}
.dg__list, .dg__list ul, .dg__after ul {
list-style: none;
margin: 0; padding: 0;
}
.dg__list:focus-visible { outline: none; }
.dg__list li[aria-selected="true"] > .dg__row { outline: 2px solid $color; outline-offset: -2px; }
.dg__list:focus-visible .dg__row { outline: none; }
.dg__row {
box-sizing: border-box;
height: 26px;
display: flex; align-items: center; gap: $sp-2;
padding: 0 $sp-2;
margin-bottom: $sp-1;
border: 1px solid rgba(23, 20, 26, .1);
border-radius: $r-xs;
background: #fff;
font-size: 12px; font-weight: 600;
cursor: grab;
user-select: none;
transition: border-color $duration $easing, background $duration $easing, box-shadow $duration $easing;
}
.dg__row--f { cursor: pointer; }
.dg__row:hover { border-color: rgba(23, 20, 26, .24); }
.dg__ico { display: inline-flex; flex: 0 0 auto; color: $stage-ink; }
.dg__ico--folder { color: $color; }
.dg__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg__n {
margin-left: auto;
flex: 0 0 auto;
min-width: 16px; height: 16px;
display: inline-flex; align-items: center; justify-content: center;
padding: 0 $sp-1;
border-radius: $r-pill;
background: rgba(23, 20, 26, .08);
font-size: 10px; line-height: 16px; font-weight: 800;
color: rgba(23, 20, 26, .72);
}
.dg__n--on { background: $color; color: #fff; }
// 폴더가 드롭 대상으로 반응하는 순간
.dg__row.is-hot {
border-color: $color;
background: rgba(47, 109, 246, .08);
box-shadow: 0 0 0 2px rgba(47, 109, 246, .25);
}
.dg__kids {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows $duration $easing;
}
.dg__kwrap { overflow: hidden; min-height: 0; }
.dg__f:has(.dg__kids li) > .dg__kids { grid-template-rows: 1fr; }
.dg__kids .dg__row { margin-left: $sp-4; }
.dg__row.is-in { animation-name: dg-in; animation-duration: 320ms; animation-timing-function: $ease-pop; animation-iteration-count: 1; }
@keyframes dg-in { 0% { transform: scale(.94); background: rgba(47, 109, 246, .16); } 100% { transform: scale(1); background: #fff; } }
// 루프용 결과 상태 — 실제 목록 위에 겹쳐 놓는다
.dg:not(.is-demo) .dg__after, .dg:not(.is-demo) .dg__ghost { display: none; }
.dg__after {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
}
.dg__inkids { padding-left: $sp-4; }
.dg__row--in { margin-bottom: $sp-1; }
.dg__row--flash { border-color: $color; background: rgba(47, 109, 246, .08); }
// 끌리는 파일 조각
.dg__ghost {
position: absolute;
left: 24px; top: 65px;
display: inline-flex; align-items: center; gap: $sp-1;
height: 24px;
padding: 0 $sp-2;
border-radius: $r-xs;
background: #fff;
border: 1px solid rgba(23, 20, 26, .14);
box-shadow: $shadow-raised;
font-size: 11px; font-weight: 700;
color: $stage-ink;
opacity: 0;
pointer-events: none;
z-index: 2;
}
.dg__ghost.is-live { position: fixed; opacity: 1; }
// ── 자동 루프: 조각이 떠올라 폴더로 들어가고 목록이 컷으로 바뀐다 ──
.dg.is-demo .dg__list {
animation-name: dg-list;
animation-duration: $dur-loop;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes dg-list {
0% { opacity: 0; }
4% { opacity: 1; }
39.9% { opacity: 1; }
40% { opacity: 0; }
100% { opacity: 0; }
}
.dg.is-demo .dg__after {
animation-name: dg-after;
animation-duration: $dur-loop;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes dg-after {
0% { opacity: 0; }
39.9% { opacity: 0; }
40% { opacity: 1; }
82% { opacity: 1; }
94%, 100% { opacity: 0; }
}
.dg.is-demo .dg__ghost {
animation-name: dg-ghost;
animation-duration: $dur-loop;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes dg-ghost {
0%, 4% { opacity: 0; transform: translate(0, 0); }
5% { opacity: 1; }
6% { transform: translate(0, 0) scale(.96); }
34% { transform: translate(10px, -52px) scale(.96); }
39.9% { opacity: 1; }
40%, 100% { opacity: 0; transform: translate(10px, -52px) scale(.96); }
}
.dg.is-demo .dg__list .dg__f:first-child .dg__row {
animation-name: dg-hot;
animation-duration: $dur-loop;
animation-timing-function: steps(1, end);
animation-iteration-count: infinite;
}
@keyframes dg-hot {
0%, 29.9% { border-color: rgba(23, 20, 26, .1); box-shadow: none; }
30%, 39.9% { border-color: $color; box-shadow: 0 0 0 2px rgba(47, 109, 246, .25); }
40%, 100% { border-color: rgba(23, 20, 26, .1); box-shadow: none; }
}
@media (max-width: 340px) {
.dg__row { height: 22px; font-size: 11px; }
@keyframes dg-ghost {
0%, 4% { opacity: 0; transform: translate(0, 0); }
5% { opacity: 1; }
6% { transform: translate(0, 0) scale(.96); }
34% { transform: translate(10px, -46px) scale(.96); }
39.9% { opacity: 1; }
40%, 100% { opacity: 0; transform: translate(10px, -46px) scale(.96); }
}
}
@media (prefers-reduced-motion: reduce) {
.dg.is-demo .dg__list, .dg.is-demo .dg__after, .dg.is-demo .dg__ghost, .dg.is-demo .dg__list .dg__f:first-child .dg__row { animation: none !important; }
.dg__row, .dg__kids { transition: none; }
.dg:not(.is-demo) .dg__after { display: none; }
}html, body {
margin: 0;
overflow: hidden;
}
.stage {
box-sizing: border-box;
min-height: 100vh;
display: grid;
place-items: center;
margin: 0;
background: #ffffff;
font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
padding: clamp(8px, 4vw, 24px);
}
.dg {
position: relative;
box-sizing: border-box;
width: min(268px, 88vw);
font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
color: #17141a;
}
.dg__list, .dg__list ul, .dg__after ul {
list-style: none;
margin: 0;
padding: 0;
}
.dg__list:focus-visible {
outline: none;
}
.dg__list li[aria-selected=true] > .dg__row {
outline: 2px solid #2f6df6;
outline-offset: -2px;
}
.dg__list:focus-visible .dg__row {
outline: none;
}
.dg__row {
box-sizing: border-box;
height: 26px;
display: flex;
align-items: center;
gap: 8px;
padding: 0 8px;
margin-bottom: 4px;
border: 1px solid rgba(23, 20, 26, 0.1);
border-radius: 4px;
background: #fff;
font-size: 12px;
font-weight: 600;
cursor: grab;
user-select: none;
transition: border-color 220ms cubic-bezier(0.2, 0.8, 0.2, 1), background 220ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dg__row--f {
cursor: pointer;
}
.dg__row:hover {
border-color: rgba(23, 20, 26, 0.24);
}
.dg__ico {
display: inline-flex;
flex: 0 0 auto;
color: #17141a;
}
.dg__ico--folder {
color: #2f6df6;
}
.dg__name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dg__n {
margin-left: auto;
flex: 0 0 auto;
min-width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 4px;
border-radius: 999px;
background: rgba(23, 20, 26, 0.08);
font-size: 10px;
line-height: 16px;
font-weight: 800;
color: rgba(23, 20, 26, 0.72);
}
.dg__n--on {
background: #2f6df6;
color: #fff;
}
.dg__row.is-hot {
border-color: #2f6df6;
background: rgba(47, 109, 246, 0.08);
box-shadow: 0 0 0 2px rgba(47, 109, 246, 0.25);
}
.dg__kids {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dg__kwrap {
overflow: hidden;
min-height: 0;
}
.dg__f:has(.dg__kids li) > .dg__kids {
grid-template-rows: 1fr;
}
.dg__kids .dg__row {
margin-left: 16px;
}
.dg__row.is-in {
animation-name: dg-in;
animation-duration: 320ms;
animation-timing-function: cubic-bezier(0.2, 1.4, 0.4, 1);
animation-iteration-count: 1;
}
@keyframes dg-in {
0% {
transform: scale(0.94);
background: rgba(47, 109, 246, 0.16);
}
100% {
transform: scale(1);
background: #fff;
}
}
.dg:not(.is-demo) .dg__after, .dg:not(.is-demo) .dg__ghost {
display: none;
}
.dg__after {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
}
.dg__inkids {
padding-left: 16px;
}
.dg__row--in {
margin-bottom: 4px;
}
.dg__row--flash {
border-color: #2f6df6;
background: rgba(47, 109, 246, 0.08);
}
.dg__ghost {
position: absolute;
left: 24px;
top: 65px;
display: inline-flex;
align-items: center;
gap: 4px;
height: 24px;
padding: 0 8px;
border-radius: 4px;
background: #fff;
border: 1px solid rgba(23, 20, 26, 0.14);
box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
font-size: 11px;
font-weight: 700;
color: #17141a;
opacity: 0;
pointer-events: none;
z-index: 2;
}
.dg__ghost.is-live {
position: fixed;
opacity: 1;
}
.dg.is-demo .dg__list {
animation-name: dg-list;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes dg-list {
0% {
opacity: 0;
}
4% {
opacity: 1;
}
39.9% {
opacity: 1;
}
40% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.dg.is-demo .dg__after {
animation-name: dg-after;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes dg-after {
0% {
opacity: 0;
}
39.9% {
opacity: 0;
}
40% {
opacity: 1;
}
82% {
opacity: 1;
}
94%, 100% {
opacity: 0;
}
}
.dg.is-demo .dg__ghost {
animation-name: dg-ghost;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes dg-ghost {
0%, 4% {
opacity: 0;
transform: translate(0, 0);
}
5% {
opacity: 1;
}
6% {
transform: translate(0, 0) scale(0.96);
}
34% {
transform: translate(10px, -52px) scale(0.96);
}
39.9% {
opacity: 1;
}
40%, 100% {
opacity: 0;
transform: translate(10px, -52px) scale(0.96);
}
}
.dg.is-demo .dg__list .dg__f:first-child .dg__row {
animation-name: dg-hot;
animation-duration: 2s;
animation-timing-function: steps(1, end);
animation-iteration-count: infinite;
}
@keyframes dg-hot {
0%, 29.9% {
border-color: rgba(23, 20, 26, 0.1);
box-shadow: none;
}
30%, 39.9% {
border-color: #2f6df6;
box-shadow: 0 0 0 2px rgba(47, 109, 246, 0.25);
}
40%, 100% {
border-color: rgba(23, 20, 26, 0.1);
box-shadow: none;
}
}
@media (max-width: 340px) {
.dg__row {
height: 22px;
font-size: 11px;
}
@keyframes dg-ghost {
0%, 4% {
opacity: 0;
transform: translate(0, 0);
}
5% {
opacity: 1;
}
6% {
transform: translate(0, 0) scale(0.96);
}
34% {
transform: translate(10px, -46px) scale(0.96);
}
39.9% {
opacity: 1;
}
40%, 100% {
opacity: 0;
transform: translate(10px, -46px) scale(0.96);
}
}
}
@media (prefers-reduced-motion: reduce) {
.dg.is-demo .dg__list, .dg.is-demo .dg__after, .dg.is-demo .dg__ghost, .dg.is-demo .dg__list .dg__f:first-child .dg__row {
animation: none !important;
}
.dg__row, .dg__kids {
transition: none;
}
.dg:not(.is-demo) .dg__after {
display: none;
}
}// 실제 동작: 포인터로 끌어 폴더에 놓는다(마우스·터치). 키보드는 Enter 로 이동 모드.
var root = document.querySelector('.dg');
var list = document.getElementById('dg-list');
var files = [].slice.call(list.querySelectorAll('.dg__i .dg__row'));
var folders = [].slice.call(list.querySelectorAll('.dg__f'));
function clearHot() { folders.forEach(function (f) { f.querySelector('.dg__row').classList.remove('is-hot'); }); }
function bump(f) {
var n = f.querySelector('.dg__n'), k = f.querySelectorAll('.dg__kids li').length;
n.textContent = k; n.classList.toggle('dg__n--on', k > 0);
f.setAttribute('aria-expanded', String(k > 0));
}
function drop(file, folder) {
folder.querySelector('.dg__kids ul').appendChild(file.closest('li'));
file.classList.add('is-in');
setTimeout(function () { file.classList.remove('is-in'); }, 320);
bump(folder);
}
files.forEach(function (row) {
row.addEventListener('pointerdown', function (e) {
if (e.button && e.button !== 0) return;
root.classList.remove('is-demo');
var gh = document.querySelector('.dg__ghost').cloneNode(true);
gh.classList.add('is-live'); gh.removeAttribute('aria-hidden');
gh.style.left = e.clientX + 'px'; gh.style.top = e.clientY + 'px';
document.body.appendChild(gh);
row.setPointerCapture(e.pointerId);
function mv(ev) {
gh.style.transform = 'translate(' + (ev.clientX - e.clientX) + 'px,' + (ev.clientY - e.clientY) + 'px) scale(.96)';
gh.style.left = e.clientX + 'px'; gh.style.top = e.clientY + 'px';
var hit = document.elementFromPoint(ev.clientX, ev.clientY);
clearHot();
var f = hit && hit.closest && hit.closest('.dg__f');
if (f) f.querySelector('.dg__row').classList.add('is-hot');
}
function up(ev) {
row.removeEventListener('pointermove', mv);
row.removeEventListener('pointerup', up);
var hit = document.elementFromPoint(ev.clientX, ev.clientY);
var f = hit && hit.closest && hit.closest('.dg__f');
clearHot();
gh.remove();
if (f) drop(row, f);
}
row.addEventListener('pointermove', mv);
row.addEventListener('pointerup', up);
e.preventDefault();
});
});
var moving = null, moveRow = null;
var rows = [].slice.call(list.querySelectorAll('li[role="treeitem"]'));
rows.forEach(function (li, i) {
li.querySelector('.dg__row').addEventListener('click', function () { list.setAttribute('aria-activedescendant', li.id); });
});
list.addEventListener('keydown', function (e) {
if (!moving && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
var cur = rows.indexOf(document.getElementById(list.getAttribute('aria-activedescendant')));
var nxt = Math.max(0, Math.min(cur + (e.key === 'ArrowDown' ? 1 : -1), rows.length - 1));
list.setAttribute('aria-activedescendant', rows[nxt].id);
e.preventDefault();
return;
}
if (moving) {
var k = folders.indexOf(moving);
if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
clearHot();
moving = folders[(k + (e.key === 'ArrowDown' ? 1 : folders.length - 1)) % folders.length];
moving.querySelector('.dg__row').classList.add('is-hot');
list.setAttribute('aria-activedescendant', moving.id);
e.preventDefault();
} else if (e.key === 'Enter') {
var f = moving, row = moveRow;
moving = null; moveRow = null; clearHot();
if (row) drop(row, f);
e.preventDefault();
} else if (e.key === 'Escape') {
moving = null; moveRow = null; clearHot();
e.preventDefault();
}
return;
}
var at = list.getAttribute('aria-activedescendant');
var li = at && document.getElementById(at);
if (e.key === 'Enter' && li && li.classList.contains('dg__i')) {
root.classList.remove('is-demo');
moving = folders[0]; moveRow = li.querySelector('.dg__row');
clearHot();
moving.querySelector('.dg__row').classList.add('is-hot');
e.preventDefault();
}
});import { useEffect, useRef, useState } from "react";
import type { CSSProperties } from "react";
import styles from "./DragIntoFolderTree.module.scss";
export type FileKind = "image" | "pdf" | "zip";
export type FolderItem = { id: string; name: string };
export type FileItem = { id: string; name: string; kind: FileKind };
export type DragIntoFolderTreeProps = {
label?: string;
folders?: FolderItem[];
files?: FileItem[];
duration?: number;
easing?: string;
color?: string;
};
type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };
type KeyEvt = { key: string; preventDefault: () => void };
type PointerEvt = {
button: number;
clientX: number;
clientY: number;
pointerId: number;
currentTarget: { setPointerCapture: (id: number) => void };
preventDefault: () => void;
};
type PtrMove = { clientX: number; clientY: number };
type KeyDown = { key: string };
function FolderIcon() {
return (
<svg viewBox="0 0 256 256" width="14" height="14">
<g fill="currentColor">
<path d="M128 80H32V56a8 8 0 0 1 8-8h52.69a8 8 0 0 1 5.65 2.34Z" opacity=".2" />
<path d="M216 72h-84.69L104 44.69A15.86 15.86 0 0 0 92.69 40H40a16 16 0 0 0-16 16v144.62A15.4 15.4 0 0 0 39.38 216h177.51A15.13 15.13 0 0 0 232 200.89V88a16 16 0 0 0-16-16M92.69 56l16 16H40V56ZM216 200H40V88h176Z" />
</g>
</svg>
);
}
function FileIcon({ kind }: { kind: FileKind }) {
if (kind === "image") {
return (
<svg viewBox="0 0 256 256" width="13" height="13">
<g fill="currentColor">
<path d="m104 152l48 72H24l36-56l16.36 25.45Zm48-120v56h56Z" opacity=".2" />
<path d="M110.66 147.56a8 8 0 0 0-13.32 0l-20.85 31.29l-9.76-15.18a8 8 0 0 0-13.46 0l-36 56A8 8 0 0 0 24 232h128a8 8 0 0 0 6.66-12.44ZM38.65 216L60 182.79l9.63 15a8 8 0 0 0 13.39.11l21-31.47L137.05 216Zm175-133.66l-56-56A8 8 0 0 0 152 24H56a16 16 0 0 0-16 16v88a8 8 0 0 0 16 0V40h88v48a8 8 0 0 0 8 8h48v120h-8a8 8 0 0 0 0 16h8a16 16 0 0 0 16-16V88a8 8 0 0 0-2.34-5.66ZM160 51.31L188.69 80H160Z" />
</g>
</svg>
);
}
if (kind === "pdf") {
return (
<svg viewBox="0 0 256 256" width="13" height="13">
<g fill="currentColor">
<path d="M208 88h-56V32Z" opacity=".2" />
<path d="M52 144H36a8 8 0 0 0-8 8v56a8 8 0 0 0 8 8h16a36 36 0 0 0 0-72m0 56h-8v-40h8a20 20 0 0 1 0 40m169.53-4.91a8 8 0 0 1 .25 11.31A30.06 30.06 0 0 1 200 216c-17.65 0-32-16.15-32-36s14.35-36 32-36a30.06 30.06 0 0 1 21.78 9.6a8 8 0 0 1-11.56 11.06A14.24 14.24 0 0 0 200 160c-8.82 0-16 9-16 20s7.18 20 16 20a14.18 14.18 0 0 0 10.22-4.66a8 8 0 0 1 11.31-.25M128 144c-17.64 0-32 16.15-32 36s14.36 36 32 36s32-16.15 32-36s-14.36-36-32-36m0 56c-8.82 0-16-9-16-20s7.18-20 16-20s16 9 16 20s-7.18 20-16 20m-80-80a8 8 0 0 0 8-8V40h88v48a8 8 0 0 0 8 8h48v16a8 8 0 0 0 16 0V88a8 8 0 0 0-2.34-5.66l-56-56A8 8 0 0 0 152 24H56a16 16 0 0 0-16 16v72a8 8 0 0 0 8 8m112-68.69L188.69 80H160Z" />
</g>
</svg>
);
}
return (
<svg viewBox="0 0 256 256" width="13" height="13">
<g fill="currentColor">
<path d="M208 88h-56V32Z" opacity=".2" />
<path d="M184 144h-16a8 8 0 0 0-8 8v56a8 8 0 0 0 16 0v-8h8a28 28 0 0 0 0-56m0 40h-8v-24h8a12 12 0 0 1 0 24m-48-32v56a8 8 0 0 1-16 0v-56a8 8 0 0 1 16 0m-40 56a8 8 0 0 1-8 8H56a8 8 0 0 1-7-12l25.16-44H56a8 8 0 0 1 0-16h32a8 8 0 0 1 7 12l-25.21 44H88a8 8 0 0 1 8 8M213.66 82.34l-56-56A8 8 0 0 0 152 24H56a16 16 0 0 0-16 16v72a8 8 0 0 0 16 0V40h88v48a8 8 0 0 0 8 8h48v16a8 8 0 0 0 16 0V88a8 8 0 0 0-2.34-5.66M160 80V51.31L188.69 80Z" />
</g>
</svg>
);
}
const DEFAULT_FOLDERS: FolderItem[] = [
{ id: "uploads", name: "uploads" },
{ id: "archive", name: "archive" },
];
const DEFAULT_FILES: FileItem[] = [
{ id: "photo", name: "photo-01.jpg", kind: "image" },
{ id: "report", name: "report.pdf", kind: "pdf" },
{ id: "data", name: "data.zip", kind: "zip" },
];
export default function DragIntoFolderTree({
label = "files",
folders = DEFAULT_FOLDERS,
files = DEFAULT_FILES,
duration = 220,
easing = "cubic-bezier(.2,.8,.2,1)",
color = "#2f6df6",
}: DragIntoFolderTreeProps) {
const [where, setWhere] = useState<{ [k: string]: string | null }>({});
const [drag, setDrag] = useState<{ id: string; x: number; y: number } | null>(null);
const [hot, setHot] = useState<string | null>(null);
const [justIn, setJustIn] = useState<string | null>(null);
const [moving, setMoving] = useState<{ fileId: string; folder: number } | null>(null);
const [at, setAt] = useState(0);
const listRef = useRef<HTMLUListElement>(null);
const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };
const kidsOf = (fid: string) => files.filter((f) => where[f.id] === fid);
const loose = files.filter((f) => !where[f.id]);
const rows: { key: string; file: FileItem | null }[] = [];
folders.forEach((fo) => {
rows.push({ key: fo.id, file: null });
kidsOf(fo.id).forEach((f) => rows.push({ key: f.id, file: f }));
});
loose.forEach((f) => rows.push({ key: f.id, file: f }));
const cur = Math.max(0, Math.min(at, rows.length - 1));
const active = rows[cur];
function drop(fileId: string, folderId: string) {
setWhere((w) => {
const next: { [k: string]: string | null } = {};
for (const k in w) next[k] = w[k];
next[fileId] = folderId;
return next;
});
setJustIn(fileId);
window.setTimeout(() => setJustIn(null), 320);
}
// 포인터로 끌어 폴더에 놓는다 (마우스·터치). Escape 로 취소.
useEffect(() => {
if (!drag) return;
const id = drag.id;
function folderAt(x: number, y: number): string | null {
const el = document.elementFromPoint(x, y);
const f = el ? el.closest("[data-folder]") : null;
return f ? f.getAttribute("data-folder") : null;
}
function onMove(ev: PtrMove) {
const x = ev.clientX;
const y = ev.clientY;
setDrag((d) => (d ? { id: d.id, x: x, y: y } : d));
setHot(folderAt(x, y));
}
function onUp(ev: PtrMove) {
const fid = folderAt(ev.clientX, ev.clientY);
setDrag(null);
setHot(null);
if (fid) drop(id, fid);
}
function onKey(ev: KeyDown) {
if (ev.key === "Escape") {
setDrag(null);
setHot(null);
}
}
document.addEventListener("pointermove", onMove);
document.addEventListener("pointerup", onUp);
document.addEventListener("pointercancel", onUp);
document.addEventListener("keydown", onKey);
return () => {
document.removeEventListener("pointermove", onMove);
document.removeEventListener("pointerup", onUp);
document.removeEventListener("pointercancel", onUp);
document.removeEventListener("keydown", onKey);
};
}, [drag ? drag.id : null]);
function grab(e: PointerEvt, fileId: string) {
if (e.button && e.button !== 0) return;
e.currentTarget.setPointerCapture(e.pointerId);
setDrag({ id: fileId, x: e.clientX, y: e.clientY });
setMoving(null);
listRef.current?.focus({ preventScroll: true });
e.preventDefault();
}
function onKeyDown(e: KeyEvt) {
if (moving) {
if (e.key === "ArrowDown" || e.key === "ArrowUp") {
const step = e.key === "ArrowDown" ? 1 : folders.length - 1;
const next = (moving.folder + step) % folders.length;
setMoving({ fileId: moving.fileId, folder: next });
setHot(folders[next].id);
e.preventDefault();
} else if (e.key === "Enter" || e.key === " ") {
drop(moving.fileId, folders[moving.folder].id);
setMoving(null);
setHot(null);
e.preventDefault();
} else if (e.key === "Escape") {
setMoving(null);
setHot(null);
e.preventDefault();
}
return;
}
if (e.key === "ArrowDown") { setAt(Math.min(cur + 1, rows.length - 1)); e.preventDefault(); }
else if (e.key === "ArrowUp") { setAt(Math.max(cur - 1, 0)); e.preventDefault(); }
else if (e.key === "Home") { setAt(0); e.preventDefault(); }
else if (e.key === "End") { setAt(rows.length - 1); e.preventDefault(); }
else if ((e.key === "Enter" || e.key === " ") && active && active.file) {
setMoving({ fileId: active.file.id, folder: 0 });
setHot(folders[0].id);
e.preventDefault();
}
}
function fileRow(f: FileItem, inside: boolean) {
const rowCls = [styles.row, inside ? styles.rowIn : "", justIn === f.id ? styles.isIn : ""]
.filter(Boolean)
.join(" ");
return (
<li
key={f.id}
id={`dg-${f.id}`}
className={styles.item}
role="treeitem"
aria-level={inside ? 2 : 1}
aria-selected={active ? active.key === f.id : false}
aria-grabbed={drag ? drag.id === f.id : moving ? moving.fileId === f.id : false}
>
<div
className={rowCls}
onPointerDown={(e: PointerEvt) => grab(e, f.id)}
onClick={() => setAt(rows.findIndex((r) => r.key === f.id))}
>
<span className={styles.ico} aria-hidden="true"><FileIcon kind={f.kind} /></span>
<span className={styles.name}>{f.name}</span>
</div>
</li>
);
}
const ghostFile = drag ? files.filter((f) => f.id === drag.id)[0] : null;
return (
<div className={styles.root} style={vars}>
<ul
ref={listRef}
className={styles.list}
role="tree"
aria-label={label}
tabIndex={0}
aria-activedescendant={active ? `dg-${active.key}` : undefined}
onKeyDown={onKeyDown}
>
{folders.map((fo) => {
const kids = kidsOf(fo.id);
return (
<li
key={fo.id}
id={`dg-${fo.id}`}
className={styles.item}
role="treeitem"
aria-level={1}
aria-expanded={kids.length > 0}
aria-selected={active ? active.key === fo.id : false}
data-folder={fo.id}
>
<div
className={`${styles.row} ${styles.rowFolder} ${hot === fo.id ? styles.isHot : ""}`}
onClick={() => setAt(rows.findIndex((r) => r.key === fo.id))}
>
<span className={`${styles.ico} ${styles.icoFolder}`} aria-hidden="true"><FolderIcon /></span>
<span className={styles.name}>{fo.name}</span>
<span className={`${styles.count} ${kids.length > 0 ? styles.countOn : ""}`}>{kids.length}</span>
</div>
<div className={`${styles.kids} ${kids.length > 0 ? styles.kidsOpen : ""}`}>
<div className={styles.kwrap}>
<ul className={styles.group} role="group" aria-label={fo.name}>
{kids.map((f) => fileRow(f, true))}
</ul>
</div>
</div>
</li>
);
})}
{loose.map((f) => fileRow(f, false))}
</ul>
{drag && ghostFile ? (
<div
className={styles.ghost}
style={{ left: `${drag.x}px`, top: `${drag.y}px` }}
aria-hidden="true"
>
<span className={styles.ico}><FileIcon kind={ghostFile.kind} /></span>
{ghostFile.name}
</div>
) : null}
</div>
);
}04 Drag a file into a folder — Measured area 13.852% · moving frames 14/23Original by GODRICH · SCSS and React ship in the zip · 9 File Tree CSS Views — Folders That Really Open
The post this demo lives in
9 File Tree CSS Views — Folders That Really OpenA file tree css view is the nested folder list in a sidebar: folders that open, files with icons, a highlight on the row See all demos in this post
If you like this effect - similar demos
Lists & tables09 A Split-Bill List Where Dragging an Item Into a Person's Slot Makes Each Slot Total Ease Toward Its New ValueCSS Receipt: 9 Thermal Print and Tear-Off Scenes
Lists & tables04 Drag-handle reorder9 Swipe to Delete List UI Patterns (Copy-Paste)
Lists & tables03 Dashed dropzone with a falling file9 Empty State UI Design Cards Drawn in Pure CSS