Firefox์์ HTML5 ์์ฑ draggable
๊ฐ true
๋ก ์ค์ ๋ ๊ตฌ์ฑ ์์ ๋ด๋ถ์ ํ
์คํธ ์
๋ ฅ์ ๋ฌธ์ ๊ฐ ์์ต๋๋ค ( ์ด ์๋ ค์ง ๋ฒ๊ทธ๋ก ์ธํด). onFocus
์ฒ๋ฆฌ๊ธฐ์์ draggable
์ false
๋ก ์ค์ ํ๊ณ onBlur
์ฒ๋ฆฌ๊ธฐ์์ true
๋ก ๋ค์ ์ค์ ํ๋ ์ค์
๋๋ค ( as ์ฌ๊ธฐ์ ๊ถ์ฅ ๋จ ), ๊ทธ๋ฌ๋ react-dnd๋ ์ด๋ฌํ ํด๊ฒฐ ๋ฐฉ๋ฒ์ ์ง์ํ์ง ์์ผ๋ฉฐ ์์ฑ์ ์ฆ์ true
๋ค์ ์ค์ ๋ฉ๋๋ค.
FireFox์์์ด ๋ฒ๊ทธ์ ๋ํ ์งํ์ด ์งํ๋์ง ์๋ ๊ฒ ๊ฐ๋ค๋ ์ ์ ๊ฐ์ํ ๋ react-dnd์ shim์ด์ด๋ฅผ ์ฒ๋ฆฌ ํ ์ฌ์ง๊ฐ ์์ต๋๊น? ์๊ด์์ด ์ข์ ํด๊ฒฐ์ฑ ์ด ๋์ค๋ฉด์ด ๋ฌธ์ ๋ฅผ ์ ๋ฐ์ดํธํ๊ฒ ์ต๋๋ค.
๊ทผ๋ณธ์ # 256 ์ผ ์ ์์ต๋๋ค.
์ง๊ธ์ ๋ด ์ฑ์์ ์ง์ draggable
์์ฑ์ ๊ด๋ฆฌ ํ ์ ์๋ ํฌํฌ๋ก ์์
ํ๊ณ ์์ต๋๋ค.
๊ฐ์ฌ. ๋๋ ํ์ฌ ๋ค๋ฅธ ํ๋ก์ ํธ๋ก ๋ฐ์๋ค.
์ด PR ์ค ํ๋๋ผ๋ ๋์์ด๋๋ค๋ฉด ์ ๋ ์๋ ค์ฃผ์ธ์ : https://github.com/gaearon/react-dnd/pulls
HTML5 ๋ฐฑ์๋๋ ํธ์์ ํฌํจ๋์ด ์์์ ์์ง ๋ง์ญ์์ค.
NPM (๋จ์ผ ํ์ผ)์ ๊ณ ์ ๋ฒ์ ์ ๊ฒ์ ํ ์ ์์ง๋ง ๋ค๋ฅธ ๋ชจ๋ ์์
์๋ ์ฌ์ ํ ๊ธฐ๋ณธ ์ ์ฅ์๋ฅผ ์ฌ์ฉํฉ๋๋ค.
onFocus
๋ฐ onBlur
์ ์ํ ๋ณ์๋ฅผ ํ ๊ธํ๊ณ render
ํจ์๋ฅผ _not_ call connectDragSource()
๋ณ๊ฒฝํ์ฌ์ด ๋ฒ๊ทธ๋ฅผ ํด๊ฒฐํ ์ ์์ต๋๋ค onBlur
:
render() {
const element = <div><textarea onFocus=... /></div>;
return this.state.editing ? element : this.props.connectDragSource(element);
}
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
onFocus
๋ฐonBlur
์ ์ํ ๋ณ์๋ฅผ ํ ๊ธํ๊ณrender
ํจ์๋ฅผ _not_ callconnectDragSource()
๋ณ๊ฒฝํ์ฌ์ด ๋ฒ๊ทธ๋ฅผ ํด๊ฒฐํ ์ ์์ต๋๋คonBlur
: