[Vue] Drag And Drop 드래그 앤 드롭 (1)

 

[Vue] Drag and Drop

 

[Vue] Drag And Drop 드래그 앤 드롭 (2)

---

 

💡 PART 1. SETTING (CMD창에서 셋팅)

• 폴더 생성
  

  mkdir DragAndDrop​

• 폴더로 이동
  

  cd DragAndDrop​

• vue/cli 설치(vue/cli)
  

  npm install -g @vue/cli

• 설치 후 version 확인
  

  vue --version​

• vue 생성
  • 생성
    

    vue create draganddrop​

  • 환경 셋팅 : 사용자가 환경을 셋팅할 수 있다. 필요에 따라 지정하면 된다.
    => 나는 Vue3를 선택했다.
    

    

  • 설치가 완전히 끝나면 다음과 같은 화면에 뜨게 된다.
    

    

• vscode 실행
  

  code .

 

 

💡 PART 2. 구현하기

• App.vue에 있는 것들을 지워주고 작업을 했다.
• 영역 나누기 : 루트영역 하위에 좌/우측의 두 영역으로 나누어 주었다.
  • bootstrap은 public > index.html에 
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">를
    추가 해주었다.
    

    <div class="row"> <!-- ROOT -->
        <div class="col-6"> <!-- LEFT -->
        	SECTOR 1
        </div>
    
        <div class="col-6"> <!-- RIGHT -->
        	SECTOR 2
        </div>
    </div>​

     
  • 실제 화면 구성
• 좌/우측의 데이터를 담을 배열을 초기화 한다.
  

  <script>
  import {reactive} from 'vue'
  export default {
    name: 'App',
    setup(){
      const state = reactive({
        leftList:[
          {content:"a"},
          {content:"b"}
        ],
        rightList:[
          {content:"c"},
          {content:"d"}
        ],
      });
  
      return {state,}
    },
  }
  </script>

• 드롭영역과 드래그아이템 스타일을 지정한다.
  

  

  스타일을 적용한 좌/우측 영역

  /* 드래그 앤 드롭 */
  .drop-area{
      width: 92%;
      margin: 50px auto;
      background-color: rgb(38, 125, 184);
      padding: 10px;
      min-height: 10px;
  }
  
  .drag-item{
      border-radius: .85em;
      text-align: center;
      background-color:rgba(0, 255, 242, 0.616);
      color: white;
      padding: 5px;
      margin-bottom: 10px;
  }

• 드래그 가능한 아이템 v-for로 뿌려주기 (좌/우측 둘 다)
  

  

  적용하면 이렇게 드래그가 된다 (=draggable이 true라서)

  <div class="drop-area">
  	<div v-for="(item,idx) in state.leftList" :key="idx"
            class="drag-item"
            draggable="true"
      >
            {{item.content}}
  	</div>
  </div>​

---

 

CPDM