Vue 및 Element-UI를 사용하여 드래그 앤 드롭 정렬 기능을 구현하는 방법

Vue 및 Element-UI를 사용하여 드래그 앤 드롭 정렬 기능을 구현하는 방법

머리말:
웹 개발에서 드래그 앤 드롭 정렬 기능은 일반적이고 실용적인 기능입니다. 이 기사에서는 Vue 및 Element-UI를 사용하여 드래그 앤 드롭 정렬 기능을 구현하는 방법을 소개하고 코드 예제를 통해 구현 프로세스를 보여줍니다.

1. 환경 설정

1. Node.js 설치
   시작하기 전에 Node.js를 설치해야 합니다. https://nodejs.org/를 방문하여 운영 체제에 해당하는 버전을 다운로드하여 설치할 수 있습니다.
2. Vue CLI 설치
   Vue CLI는 Vue 프로젝트를 빠르게 구축하기 위한 도구입니다. 명령줄 도구를 열고 다음 명령을 실행하여 Vue CLI를 설치합니다.

npm install -g @vue/cli

3. Create Vue 프로젝트
   명령줄에서 다음 명령을 실행하여 새 Vue 프로젝트를 만듭니다.

vue create drag -sort-demo

프롬프트에 따라 구성 옵션을 선택하고 프로젝트가 생성될 때까지 기다립니다.

4. Element-UI 설치
   방금 생성한 Vue 프로젝트 디렉토리를 입력하고 명령줄에서 다음 명령을 실행하여 Element-UI를 설치합니다.

npm install element-ui

2. 정렬 기능

1. Import Element -UI
   Vue 프로젝트의 항목 파일 src/main.js에서 Element-UI의 스타일과 구성 요소를 가져옵니다.

'vue'에서 Vue 가져오기;
'element-에서 ElementUI 가져오기 ui';
import 'element-ui /lib/theme-chalk/index.css';

Vue.use(ElementUI);

2. 데모 컴포넌트 생성
   새 컴포넌트 생성 src/comComponents에 DragSortDemo.vue 드래그 앤 드롭 정렬 기능을 보여주는 디렉토리입니다. DragSortDemo.vue 파일을 편집하고 다음 코드를 추가합니다.

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<div class="drag-sort-demo">
  <el-collapse-transition>
    <div v-for="item in list" :key="item.id" class="drag-item" :class="{ 'dragging': draggingId === item.id }" draggable="true" @dragstart="handleDragStart(item)" @dragend="handleDragEnd(item)">
      {{ item.name }}
    </div>
  </el-collapse-transition>
</div>
<el-button type="primary" @click="handleSort">保存排序</el-button>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
기본값 {
데이터 내보내기 () {

return {
  list: [
    { id: 1, name: 'A' },
    { id: 2, name: 'B' },
    { id: 3, name: 'C' },
    { id: 4, name: 'D' },
    { id: 5, name: 'E' },
  ],
  draggingId: null,
};

},
메소드: {

handleDragStart(item) {
  this.draggingId = item.id;
},
handleDragEnd() {
  this.draggingId = null;
},
handleSort() {
  const sortedList = Array.from(this.$el.querySelectorAll('.drag-item')).map((el, index) => {
    const id = el.getAttribute('data-id');
    const name = el.textContent;
    return { id, name, sort: index + 1 };
  });
  // 将排序后的列表保存到数据库或发送给后端
},

},
};
2cacc6d41bbb37262a98f745aa00fbf0

0ff9b516ad958d29edfdf762cfebcd5b
.drag-sort-demo {
디스플레이: flex;
flex-wrap : 감싸기 ;
}

.drag-item {
패딩: 10px;
여백: 10px 0;
배경색: #f5f5f5;
테두리: 1px 단색 #ebebeb;
커서: 이동;
전환: 상자 그림자 0.3초 ;
}

.drag-item.draging {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
531ac245ce3e4fe3d50054a55f265927

설명:

• In the 템플릿, v-for 지시문을 사용하여 목록 항목을 동적으로 렌더링합니다. 목록 항목의 클래스는 현재 끌어온 항목이 목록 항목인지 여부를 결정하는 데 사용되는 계산된 속성에 바인딩됩니다.
• 각 목록 항목에 draggable 속성을 추가하고 dragstart 및 dragend 이벤트 핸들러를 등록하여 각각 드래그 시작 및 종료 이벤트를 트리거합니다.
• handleSort 메서드는 처리를 위해 드래그 앤 드롭으로 정렬된 목록 데이터를 백엔드로 저장하거나 보냅니다.

3. 구성 요소 사용
   src/App.vue 파일에서 DragSortDemo 구성 요소를 사용하세요.

d477f9ce7bf77f53fbcf36bec1b69b7a
2e4c03ba1a844f9ccaa1fdeb1b48713f

<drag-sort-demo></drag-sort-demo>

16b28748ea4df4d9c2150843fecfba68
;

<script><br>'./comComponents/DragSortDemo.vue'에서 DragSortDemo 가져오기;</script>

기본 {
구성요소 내보내기: {

DragSortDemo,

},
};
2cacc6d41bbb37262a98f745aa00fbf0

3. 실행합니다. 프로젝트
명령줄에서 다음 명령을 실행하여 프로젝트를 시작하세요.

npm runserv

http://localhost:8080을 방문하여 드래그 앤 드롭 정렬 기능의 데모 페이지를 확인하세요. 목록 항목을 드래그하여 정렬을 변경하고, 정렬 저장 버튼을 클릭하면 정렬 결과가 저장됩니다.

결론:
위 단계를 통해 Vue와 Element-UI를 사용하여 드래그 앤 드롭 정렬 기능을 성공적으로 구현했습니다. 이는 웹 개발을 위한 간단하고 실용적인 솔루션을 제공하여 사용자 경험을 향상시키고 인터페이스 상호 작용을 최적화할 수 있습니다. 이 글이 모든 사람의 프론트엔드 개발 작업에 도움이 되기를 바랍니다.

위 내용은 Vue 및 Element-UI를 사용하여 드래그 앤 드롭 정렬 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!