λ²κ·Έ μ€λͺ
λ²κ·Έκ° 무μμΈμ§μ λν λͺ
ννκ³ κ°κ²°ν μ€λͺ
.
λͺ¨λμ μ°Ύμ μ μμ: 'D:\desktop\ant_design_pro\onefox\src\components\Drag'μ './Constants'λ₯Ό νμΈν μ μμ΅λλ€.
μ¬ννκΈ° μν΄
λμμ μ¬ννλ λ¨κ³:
'react'μμ React, { Component } κ°μ Έμ€κΈ°;
'prop-types'μμ PropTypeμ κ°μ Έμ΅λλ€.
import { DragSource } from 'react-dnd';
'./μμ'μμ { ItemTypes } κ°μ Έμ€κΈ°;
μμλ μ΄λμ μμ΅λκΉ? μ΄λ»κ² ItemTypesλ₯Ό κ°μ Έμ¬ μ μμ΅λκΉ?
μμλλ νλ
μμνλ μΌμ λν λͺ
ννκ³ κ°κ²°ν μ€λͺ
.
μ€ν¬λ¦°μ·
ν΄λΉνλ κ²½μ° λ¬Έμ λ₯Ό μ€λͺ
νλ λ° λμμ΄ λλ μ€ν¬λ¦°μ·μ μΆκ°νμΈμ.
λΈλΌμ°μ ν¬λ‘¬
μΆκ° 컨ν
μ€νΈ
μ¬κΈ°μ λ¬Έμ μ λν λ€λ₯Έ 컨ν
μ€νΈλ₯Ό μΆκ°νμμμ€.
@yaoyuande μ΄ λ¬Έμ λ react-dnd
μ κ΄λ ¨μ΄ μλ κ² κ°μ΅λλ€.
react-dndμμ λͺ¨λ λλκ·Έ μμ€μλ μ νμ΄ μμ΅λλ€. κ·Έλ¦¬κ³ μ νμ΄ λ¬΄μμΈμ§λ νλ‘κ·Έλ¨μμ λλκ·Ένλ νλͺ©μ λ°λΌ λ€λ¦ λλ€. λ°λΌμ λ΄ μ±μλ "μμ " λ° "νλ‘μ νΈ" μ νμ΄ μμ§λ§ "μ°λ½μ²" λ° "μ‘°μ§"μ΄ μμ μ μμ΅λλ€. μ΄ λ¬Έμμ΄μ νμ μ λ ₯νκ³ μΆμ§ μλ€λ©΄(ν λ§μ μ² μκ° ν릴 μ μμΌλ―λ‘) νμΌμ λͺ¨λ μ μ₯ν μ μμ΅λλ€.
// Constants.js
export default {
CONTACT: "contact",
ORGANIZATION: "organization",
};
κ·Έλ° λ€μ μλ₯Ό λ€μ΄ Drag/Contact.jsμμ λ€μμ μ¬μ©ν©λλ€.
import ItemTypes from "./Constants";
class Contact extends Component {
...
}
Contact = DragSource(ItemTypes.CONTACT, ...)(Contact);
export { Contact };
λ¬Έμ λ Constants.js νμΌμ μμ±νμ§ μμκ±°λ PCμ Drag λλ ν 리μ μλ€λ κ²μ λλ€!
@amazingmarvin μ λ§ κ°μ¬ν©λλ€!
κ°μ₯ μ μ©ν λκΈ
react-dndμμ λͺ¨λ λλκ·Έ μμ€μλ μ νμ΄ μμ΅λλ€. κ·Έλ¦¬κ³ μ νμ΄ λ¬΄μμΈμ§λ νλ‘κ·Έλ¨μμ λλκ·Ένλ νλͺ©μ λ°λΌ λ€λ¦ λλ€. λ°λΌμ λ΄ μ±μλ "μμ " λ° "νλ‘μ νΈ" μ νμ΄ μμ§λ§ "μ°λ½μ²" λ° "μ‘°μ§"μ΄ μμ μ μμ΅λλ€. μ΄ λ¬Έμμ΄μ νμ μ λ ₯νκ³ μΆμ§ μλ€λ©΄(ν λ§μ μ² μκ° ν릴 μ μμΌλ―λ‘) νμΌμ λͺ¨λ μ μ₯ν μ μμ΅λλ€.
κ·Έλ° λ€μ μλ₯Ό λ€μ΄ Drag/Contact.jsμμ λ€μμ μ¬μ©ν©λλ€.
λ¬Έμ λ Constants.js νμΌμ μμ±νμ§ μμκ±°λ PCμ Drag λλ ν 리μ μλ€λ κ²μ λλ€!