์ฌ์ฉ์ ์ ์ ๋๋๊ทธ ํธ๋ค ์ฌ์ฉ์ ๋ํ ์๊ฐ ์์ต๋๊น?
ํจ๋ ํค๋(์ ์ฒด๊ฐ ์๋)๋ฅผ ์ฌ์ฉํ์ฌ ํญ๋ชฉ์ ๋๋๊ทธ ๊ฐ๋ฅํ๊ฒ ๋ง๋ค๋ ค๊ณ ํฉ๋๋ค. ๊ฐ๋ฅํ ๋ง์ ์กฐํฉ์ผ๋ก ์๋ ์ฝ๋๋ฅผ ์๋ํ์ง๋ง ์ฑ๊ณตํ์ง ๋ชปํ์ต๋๋ค.
<div class="grid-stack">
<div class="grid-stack-item"
data-gs-x="0" data-gs-y="0"
data-gs-width="4" data-gs-height="2">
<div class="grid-stack-item-content panel panel-default">
<div class="panel-heading clearfix">
<span class="panel-title pull-left"><span class="glyphicon glyphicon-asterisk"></span> <span class="panel-title-text">Featuring</span></span>
</div>
<div class="panel-body ">
<ul class="list-group">
<li class="list-group-item">a</li>
<li class="list-group-item">v</li>
</ul>
</div>
</div>
</div>
</div
js ์ฝ๋:
var options = {
cell_height: 80,
vertical_margin: 10,
animate: true,
handle: ???
};
this.$('.grid-stack').gridstack(options);
handle:'.panel'
, handle:'panel-heading'
๋ฐ ํธ๋ค ์์ด ์๋ํ์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ grid-stack-item-content
ํด๋์ค๋ ์ ๊ฑฐํ๋ ค๊ณ ์๋ํ์ง๋ง ๋ชจ๋ ๊ฒฝ์ฐ์ ๊ฒฐ๊ณผ๋ either the whole thing moves or nothing moves at all
.
ํญ๋ชฉ์ ํค๋๋ก๋ง ์ด๋ ๊ฐ๋ฅํ๊ฒ ๋ง๋๋ ๋ฐฉ๋ฒ์ ๋ฌด์์ ๋๊น?
์ผ ํฌ๋ฆฌ์๋
๋ฌธ์ ๋ ์ต์ ๋ณ์์ ์๋ ๊ฒ ๊ฐ์ต๋๋ค.
๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฝ๋๋ฅผ ์ดํด๋ณด๋ฉด 379ํ๋ถํฐ ๊ธฐ๋ณธ ์ต์ ๊ณผ ๊ตฌ์ฑ ๋ฐฉ์์ ๋ณผ ์ ์์ต๋๋ค.
์ฌ์ฉ์ ์ ์ ๋๋๊ทธ ๊ฐ๋ฅ ์ปจํ ์ด๋์ ํธ๋ค์ ๋๋๊ทธ ๊ฐ๋ฅ ์์ฑ์ ํ์ ์์ฑ์ด์ด์ผ ํฉ๋๋ค. js ์ฝ๋๋ ๋ค์๊ณผ ๊ฐ์์ผ ํฉ๋๋ค.
var options = {
cell_height: 80,
vertical_margin: 10,
animate: true,
draggable: {
handle: '.panel-heading',
}
};
this.$('.grid-stack').gridstack(options);
๋ฉ์ ธ์. ์ ๋ง ๋งค๋ ฅ์ ์ด๊ตฐ์. ๋น์ ์ ํ๋ฅญํฉ๋๋ค. ํ๋ฃจ ์ข ์ผ ๊ทธ๊ฒ์ ๊ฑท์ด์ฐจ๊ณ ์ฌ๊ธฐ ๋น์ ์ ๋๋ต์ด ์์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ๊ทธ๊ฒ์ ๋จ์ง ์๋ํฉ๋๋ค :) ๋๋์ต๋๋ค.
์ ๋ง ๋์์ด ๋์์ต๋๋ค. ๊ฐ์ฌํฉ๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์ผ ํฌ๋ฆฌ์๋
๋ฌธ์ ๋ ์ต์ ๋ณ์์ ์๋ ๊ฒ ๊ฐ์ต๋๋ค.
๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ฝ๋๋ฅผ ์ดํด๋ณด๋ฉด 379ํ๋ถํฐ ๊ธฐ๋ณธ ์ต์ ๊ณผ ๊ตฌ์ฑ ๋ฐฉ์์ ๋ณผ ์ ์์ต๋๋ค.
์ฌ์ฉ์ ์ ์ ๋๋๊ทธ ๊ฐ๋ฅ ์ปจํ ์ด๋์ ํธ๋ค์ ๋๋๊ทธ ๊ฐ๋ฅ ์์ฑ์ ํ์ ์์ฑ์ด์ด์ผ ํฉ๋๋ค. js ์ฝ๋๋ ๋ค์๊ณผ ๊ฐ์์ผ ํฉ๋๋ค.