Gridstack.js: ๋“œ๋ž˜๊ทธ ํ›„ ์œ„์ ฏ ๊ฒน์นจ

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

์ดˆ๊ธฐ ์ฝ”๋“œ๋Š”
๋ณ€์ˆ˜ ์˜ต์…˜ = {
์…€ ๋†’์ด: ์…€ ๋†’์ด,
๋น„ํ™œ์„ฑํ™” ํฌ๊ธฐ ์กฐ์ •: ์ฐธ,
disableDrag: ๊ฑฐ์ง“,
ํ•ธ๋“ค: '.ibox-title',
๋ถ€๋™ ์†Œ์ˆ˜์  : ๊ฑฐ์ง“,

        };
        $('.grid-stack').gridstack(options);

๊ทธ๋ฆฌ๊ณ  ๋ชจ๋“  grid-stack-item์—๋Š” data-gs-auto-position="1" ์„ค์ •์ด ์žˆ์Šต๋‹ˆ๋‹ค.

๋“œ๋ž˜๊ทธํ•˜๋ฉด ๋•Œ๋•Œ๋กœ ๋‹ค๋ฅธ ์œ„์ ฏ ์œ„๋กœ ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค.

๋ˆ„๊ตฌ๋“ ์ง€์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

need more info

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

์ด ๋ฌธ์ œ๋Š” ๊ฐœ๋ฐœ ๋ธŒ๋žœ์น˜์—์„œ ํ•ด๊ฒฐ๋œ ๊ฒƒ ๊ฐ™์œผ๋ฏ€๋กœ ๋‹ค์Œ ๋ฆด๋ฆฌ์Šค์™€ ํ•จ๊ป˜ ์ œ๊ณต๋  ๊ฒƒ์ด๋ผ๊ณ  ๊ฐ€์ •ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ ๋™์•ˆ v0.3.0 ์œ„์— 38d78e๋ฅผ ์ฒด๋ฆฌ ์„ ํƒ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ํŒจ์น˜๋กœ ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

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

์•ˆ๋…•ํ•˜์„ธ์š”, @athamsnajeeb1 ! ์˜ค๋Š˜ ์ž˜ ์ง€๋‚ด์‹œ๊ธฐ ๋ฐ”๋ž๋‹ˆ๋‹ค.

jsfiddle์ด๋‚˜ ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•˜์—ฌ ์ฝ”๋“œ์™€ ๊ฒช๊ณ  ์žˆ๋Š” ๋ฌธ์ œ๋ฅผ ์‚ดํŽด๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

์•ˆ๋…•ํ•˜์„ธ์š” @radiolips ๋‹˜ ,
๋‚˜๋Š” ๋˜ํ•œ ๊ฐ™์€ ๋ฌธ์ œ์— ์ง๋ฉดํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๋ฌธ์ œ๋ฅผ ์žฌํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” jsfiddle ์„ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.

์žฌํ˜„ ๋‹จ๊ณ„:

  1. "์œ„์ ฏ 3"์„ ๋ช‡ ์ธ์น˜ ์™ผ์ชฝ์œผ๋กœ ๋•๋‹ˆ๋‹ค.
  2. ์ด์ œ "์œ„์ ฏ 12"๊ฐ€ "์œ„์ ฏ 1"์— ๊ฒน์ณ์ง€๊ณ  ์ผ๋ถ€ ์œ„์ ฏ๋„ ํ‘œ์‹œ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ "์œ„์ ฏ 1"๊ณผ ์œ ์‚ฌํ•œ "์œ„์ ฏ 12" ๋’ค์— ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.

๋ฏธ๋ฆฌ ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

์ด ๋ฌธ์ œ๋Š” ๊ฐœ๋ฐœ ๋ธŒ๋žœ์น˜์—์„œ ํ•ด๊ฒฐ๋œ ๊ฒƒ ๊ฐ™์œผ๋ฏ€๋กœ ๋‹ค์Œ ๋ฆด๋ฆฌ์Šค์™€ ํ•จ๊ป˜ ์ œ๊ณต๋  ๊ฒƒ์ด๋ผ๊ณ  ๊ฐ€์ •ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ ๋™์•ˆ v0.3.0 ์œ„์— 38d78e๋ฅผ ์ฒด๋ฆฌ ์„ ํƒ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ํŒจ์น˜๋กœ ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

๋ฐฉ๊ธˆ ์‹œ๋„ํ–ˆ๊ณ  @erkather ๊ฐ€ ์„ค๋ช…ํ•œ ์ •ํ™•ํ•œ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ–ˆ์Šต๋‹ˆ๋‹ค. 0.3.0 ๋ฆด๋ฆฌ์Šค๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐ์‚ฌ ํ•ด์š” !

์—„์ฒญ๋‚œ! ์ด ๋ฌธ์ œ๋ฅผ ๋‹ซ์„ ๊ฒƒ์ด์ง€๋งŒ @athamsnajeeb1 ์ด ์›๋ž˜ ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋˜์ง€ ์•Š์œผ๋ฉด ๋‹ค์‹œ ์—ด์–ด ์ฃผ์„ธ์š”.

@brendonboshell ๊ฐ์‚ฌ

jsfiddle ์„ ์ œ๊ณตํ•˜์—ฌ ๋‚˜๋ฅผ ๋„์™€์ค€ @brendonboshell ์—๊ฒŒ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

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