template 模板
- <transition-group tag="div" class="container">
- <div class="item" v-for="(item,index) in items" :key="item.key" :style="{background:item.color,width:'80px',height:'80px'}"
- draggable="true"
- @dragstart="handleDragStart($event, item)"
- @dragover.prevent="handleDragOver($event, item)"
- @dragenter="handleDragEnter($event, item)"
- @dragend="handleDragEnd($event, item)">
- </div>
- </transition-group>
- script:
- <script>
- export default {
- name: 'Toolbar',
- data () {
- return {
- items: [
- { key: 1, color: '#ffebcc'},
- { key: 2, color: '#ffb86c'},
- { key: 3, color: '#f01b2d'}
- ],
- dragging: null
- }
- },
- methods:{
- handleDragStart(e,item){
- this.dragging = item;
- },
- handleDragEnd(e,item){
- this.dragging = null
- },
- // 首先把 div 变成可以放置的元素, 即重写 dragenter/dragover
- handleDragOver(e) {
- e.dataTransfer.dropEffect = 'move'// e.dataTransfer.dropEffect="move";// 在 dragenter 中针对放置目标来设置!
- },
- handleDragEnter(e,item){
- e.dataTransfer.effectAllowed = "move"// 为需要移动的元素设置 dragstart 事件
- if(item === this.dragging){
- return
- }
- const newItems = [...this.items]
- console.log(newItems)
- const src = newItems.indexOf(this.dragging)
- const dst = newItems.indexOf(item)
- newItems.splice(dst, 0, ...newItems.splice(src, 1))
- this.items = newItems
- }
- }
- }
- </script>
- <style scoped>
- .container{
- width: 80px;
- height: 300px;
- position: absolute;
- left: 0;
- display:flex;
- flex-direction: column;
- padding: 0;
- }
- .item {
- margin-top: 10px;
- transition: all linear .3s
- }
最后
为了帮助大家让学习变得轻松, 高效, 给大家免费分享一大批资料, 帮助大家在成为全栈工程师, 乃至架构师的路上披荆斩棘. 在这里给大家推荐一个前端全栈学习交流圈: 866109386. 欢迎大家进群交流讨论, 学习交流, 共同进步.
当真正开始学习的时候难免不知道从哪入手, 导致效率低下影响继续学习的信心.
但最重要的是不知道哪些技术需要重点掌握, 学习时频繁踩坑, 最终浪费大量时间, 所以有有效资源还是很有必要的.
最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们, 祝福大家在往后的工作与面试中一切顺利.
来源: http://www.qdfuns.com/article/51070/88e50476c0c7e35f0f81f989c1d33ed0.html