我被一个拖拽难住了？
我被一个拖拽难住了？
千古江山，英雄无觅孙仲谋处。舞榭歌台，风流总被雨打风吹去。
接上文
上回的代码基本上实现了单个组件拖拽到内容区进行渲染。同时可以在右侧对其内容进行配置。这两天优化了下代码，更新了布局样式。
拖拽的Bug
拖拽的问题表现有两个:
一、当有一个组件时，拖拽到内容展示区，正常展示。当有多个组件时，直接展示组件列表中的最后一个。
二、拖拽时会在拖拽的组件上显示一个禁用标识。
第一个问题产生的原因:
drop事件写在拖拽组件中,左侧可选组件都是基于这个拖拽组件的，只要drop事件触发，理论上所有的组件都会触发这个事件，最终在全局的状态中只会缓存最后一个组件。
最终的处理方案变成，在拖动某个组件时，全局中增加一个标识标识正在拖动的是哪个组件，然后在放置组件后清除这个缓存。
<template>
<div class="draggable-item" :draggable="true"
@dragstart="dragStart"
@dragend="dragEnd"
@drop="dragEnd"
>
<Icon type="ios-cube-outline" size="50" />
<div>{{ itemInfo.name }}</div>
</div>
</template>
<script>
// import Vue from 'vue'
import {mapState} from 'vuex'
export default {
setup() {},
props: {
itemInfo: Object,
},
computed:mapState({
// draging: state => state.draging,
}),
data() {
return {
draggedItem:null
}
},
methods:{
dragStart(e){
this.draggedItem = e.target
e.target.style.opacity = .5;
this.$store.commit('setDragedComponent',this.itemInfo)
},
dragEnd(e){
e.target.style.opacity = '';
console.log('dragEnd----',e)
}
},
mounted() {
},
watch:{
}
}
</script>
<style>
.draggable-item {
border: 1px solid #2d8cf0;
padding: 8px 16px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
cursor: pointer;
margin-bottom:8px;
}
.draggable-item:hover {
background: #2d8cf0;
color: #fff;
}
</style>
第二个问题出现禁用标识的原因是:
因为当拖动元素经过document时，document对象默认阻止了拖动事件，而其他HTML组件也位于document对象内，因此它们也不能接受“放”。比如，我要拖动测试组件到内容展示区，就会出现禁用标识。
而解决这个问题的方法也比较简单，只需要在目标元素的两个事件dragenter ondragover事件加上event.preventDefault()即可。
// 去掉禁用标识
dragEnter(e){
e.preventDefault()
if(e.target.className==="contents"){
}
},
关于拖拽的细节
一、拖拽有哪些API?
dragstartdragenddragoverdragenterdragleavedrop
二、这些API分别在什么地方触发，什么时候触发？
dragstart,dragend 在目标元素上触发，也就是在拖动的元素上触发。
dragenter,dragover,dragleave,drop在目标放置区域触发，也就是你需要将拖动的元素放到哪个区域，这些个方法就在那个区域触发。
接下来的规划
添加点击事件，点击内容区某个组件，激活左侧对应的组件及组件配置的setter,然后实现右侧能够动态配置。
总结
个人开发者很难独自完成某个成熟的产品级的应用。原因有以下几点:
一、无法考虑到具体的业务场景，似乎也可以说是不知道如何将需求变现的一个过程。
二、技术限制。比如我是一个不懂后端的前端或者是个不懂前端的后端，即使对业务流程非常熟悉，也很难自己去实现这么一套应用。
三、时间。这个就不说了，做什么事都是需要花费大量精力的。
代码仓库:https://gitee.com/mynoe/low-code-platform.git
javascript基础知识总结
本文分享自 JavaScript高级程序设计 微信公众号，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体分享计划 ，欢迎热爱写作的你一起参与！