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 파일을 편집하고 다음 코드를 추가합니다.

<script><br>기본값 {<br> 데이터 내보내기 () {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>return { list: [ { id: 1, name: 'A' }, { id: 2, name: 'B' }, { id: 3, name: 'C' }, { id: 4, name: 'D' }, { id: 5, name: 'E' }, ], draggingId: null, };</pre><div class="contentsignin">로그인 후 복사</div></div><p>},<br> 메소드: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>handleDragStart(item) { this.draggingId = item.id; }, handleDragEnd() { this.draggingId = null; }, handleSort() { const sortedList = Array.from(this.$el.querySelectorAll('.drag-item')).map((el, index) =&gt; { const id = el.getAttribute('data-id'); const name = el.textContent; return { id, name, sort: index + 1 }; }); // 将排序后的列表保存到数据库或发送给后端 },</pre><div class="contentsignin">로그인 후 복사</div></div><p>},<br>};<br></script>

<스타일 범위>
.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);
}

설명:

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

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