Gridstack.js: ์œ„์ ฏ ์ˆจ๊ธฐ๊ธฐ

์— ๋งŒ๋“  2015๋…„ 03์›” 06์ผ  ยท  7์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: gridstack/gridstack.js

@zhaoyoubing ๋งํ•œ๋‹ค:

๋˜ํ•œ "์ˆจ๊ธฐ๊ธฐ" ๋˜๋Š” "์ตœ์†Œํ™”" ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค. "hide" ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜๋ฉด DOM์—์„œ ์‚ญ์ œํ•˜์ง€ ์•Š๊ณ  re-layout์„ ๊ตฌํ˜„ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

need more info

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์ˆจ๊ธฐ๊ธฐ/ํ‘œ์‹œ์— ๋Œ€ํ•œ ์˜ˆ๋ฅผ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

๋ชจ๋“  7 ๋Œ“๊ธ€

์•ˆ๋…•,

detach_node ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ remove_widget API ๋ฉ”์†Œ๋“œ์— ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค. false ๋ฅผ ์ „๋‹ฌํ•˜๋ฉด DOM ๋…ธ๋“œ๊ฐ€ DOM ํŠธ๋ฆฌ์—์„œ ์ œ๊ฑฐ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ๋Œ€์‹  ์ˆจ๊ธธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

https://github.com/troolee/gridstack.js#remove_widgetel -detach_node

์•ˆ๋…•,
์ด ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•ด ๋ณด์•˜์Šต๋‹ˆ๋‹ค. ๋ถ„๋ฆฌ ๋ชจ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์š”์†Œ๋ฅผ ์ˆจ๊ธด ๋‹ค์Œ add_widget์„ ์‚ฌ์šฉํ•˜์—ฌ ํ‘œ์‹œ๋˜๋„๋ก ํ•ฉ๋‹ˆ๋‹ค(์ด ์ž‘์—…์„ ์ˆ˜ํ–‰ํ•˜๋Š” ์˜ฌ๋ฐ”๋ฅธ ๋ฐฉ๋ฒ•์ธ์ง€ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค). ์ฒ˜์Œ์—๋Š” ์ž‘๋™ํ•˜์ง€๋งŒ(์ˆจ๊ธฐ๊ธฐ ๋ฐ ํ‘œ์‹œ) ๋‹ค์Œ์— ์ˆจ๊ธฐ๋ ค๊ณ  ์‹œ๋„ํ•œ ํ›„์— ๊ทธ๊ฒƒ์€ ์œ„์ ฏ์˜ ์œ„์น˜๊ฐ€ ๋‹ค๋ฅธ ์œ„์ ฏ์— ์˜ํ•ด ์‚ฌ์šฉ๋˜์—ˆ์ง€๋งŒ(์ž‘๋™ํ•ด์•ผ ํ•˜๋ฏ€๋กœ) ์ œ๊ฑฐ๋˜์–ด์•ผ ํ•˜๋Š” ์œ„์ ฏ์ด ์ž์ฒด ๊ทธ๋ฆฌ๋“œ์— ๋ฐฐ์น˜๋˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ ์œ  ๊ณต๊ฐ„์„ ๋ฌด์‹œํ•˜๊ณ  ๊ทธ ์œ„์— ๋ฐฐ์น˜๋˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ๋Œ์–ด์„œ ๋ฐฐ์น˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ๊ฒƒ๋“ค์€ ์ž์œ ๋กญ๊ฒŒ.

์•„๋งˆ๋„ ์ด๊ฒƒ์€ ๋‚ด๊ฐ€ add_widget์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๊ณ  ์ˆจ๊ฒจ์ง„ ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ํ‘œ์‹œํ•˜๋Š” ๊ฐ€์žฅ ์ข‹์€ ์˜ต์…˜์ด ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์ผ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์กฐ์–ธ์„ ์ฃผ์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?
๊ฐ์‚ฌ ํ•ด์š”.

์•ˆ๋…•ํ•˜์„ธ์š” @rcastilllog ์ž…๋‹ˆ๋‹ค .

jsfiddle์„ ์‚ฌ์šฉํ•˜์—ฌ ์ฝ”๋“œ ์ƒ˜ํ”Œ์„ ์ œ๊ณตํ•˜๊ฑฐ๋‚˜ ์—ฌ๊ธฐ์— ๋ฐฐ์น˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

๋ฌผ๋ก , ๋‹ค์Œ ๋‚ ์—๋Š” ์•ฝ๊ฐ„์˜ ์ƒ˜ํ”Œ์„ ์ค€๋น„ํ•˜์—ฌ ์—ฌ๊ธฐ์— ๊ฒŒ์‹œํ•˜๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๋งŽ์€ ์ผ์„ ํ•˜๊ธฐ ์ „์— ๋‹ต์„ ๊ตฌํ•˜์‹ญ์‹œ์˜ค.

์ธ์‚ฌ๋ง.

@rcastilllog ์ƒ˜ํ”Œ์„ ์„ค์ •ํ•˜์…จ๋‚˜์š”?

ํ™œ๋™์ด ์—†์–ด ๋‹ซ๊ฒŒ ๋˜์ง€๋งŒ ๋ฌธ์ œ๋„ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™์•„์„œ ์ž‘์€ ๋‹ต๋ณ€์„ ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.

makeWidget ๋ฉ”์†Œ๋“œ๊ฐ€ ์ตœ๊ทผ์— ์ถ”๊ฐ€๋˜์—ˆ์œผ๋ฉฐ ์—ฌ๊ธฐ์— ํ•„์š”ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. addWidget ๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด DOM์— ์š”์†Œ๊ฐ€ ์ถ”๊ฐ€๋˜๊ณ  ์ค‘๋ณต์œผ๋กœ ๋๋‚  ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๋ฐ˜๋ฉด makeWidget ๋Š” ๊ธฐ์กด ์š”์†Œ๋ฅผ gridstack์— ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. ๋‹น์‹ ์ด ํ˜ธ์ถœํ•˜๋ฉด removeWidget ํ•˜๊ณ  ํ†ต๊ณผ detachNode=false ๋‹ค์Œ, makeWidget ๋‹น์‹ ์ด ๋‹น์‹ ์ด ์›ํ•˜๋Š” ๊ฒƒ์„ ์„ฑ์ทจํ•˜๋Š” ๋ฐ ๋„์›€์ด๋ฉ๋‹ˆ๋‹ค ๋Œ€์‘์ด ์˜ˆ์ƒ๋œ๋‹ค.

์ด ๋ฐฉ๋ฒ•์ด ๋„์›€์ด ๋˜์ง€ ์•Š์œผ๋ฉด ์ด ํ‹ฐ์ผ“์„ ๋‹ค์‹œ ์—ฌ์‹ญ์‹œ์˜ค.

์ˆจ๊ธฐ๊ธฐ/ํ‘œ์‹œ์— ๋Œ€ํ•œ ์˜ˆ๋ฅผ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰