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><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><p>},<br> ???: {</p><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 }; }); // 將排序后的列表保存到數(shù)據(jù)庫或發(fā)送給后端 },</pre><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 ?? ??? ?????.