本篇涉及的知识点有
本篇文章采用H5的拖放API，实现一个简单的控件编辑器，首先用flex布局构建一个简单的左右分栏界面，代码如下
//css
<style type="text/css">
button{
padding:5px 20px;
background: #00a854;
}
.container{
display: flex;
flex-direction: row;
align-items: stretch;/*默认值，如果子元素未设置高度或设为auto，将占满整个容器的高度，如果子元素设置高度100%，padding或margin时会导致子元素溢出*/
height: 600px;
margin:30px;
}
.widget{
width: 200px;
margin-right: 10px;
padding:10px;
border:1px solid #ccc;
}
.zone{
flex:1 1 auto;
background: #f1f1f1;
}
</style>
//html
<div class="container">
<div class="widget">
<button type="button" id="target" draggable="true">drag me</button>
</div>
<div class="zone" id="zone">
</div>
</div>
在H5如果想拖动一个元素非常简单，只需要将它的draggable属性设置true即可，在控件编辑器中，控件自身是一段可插入的HTML，并可以包含css和js脚本。
可拖动的元素是控件的外在展示方式，一般用icon展示，此处为了方便，选用button。我们可以在dragstart事件，给拖动的元素用dataTransfer.setData方法设置控件的HTML，然后在拖动结束后添加到Zone，代码具体如下
<script>
let target=document.getElementById('target');
let zone=document.getElementById('zone');
target.ondragstart=function (e) {
e.dataTransfer.setData('html','<h1>Hello world</h1>');
};
zone.ondragover=function (e) {
e.preventDefault();
e.dataTransfer.dropEffect='copy';
};
zone.ondrop=function (e) {
e.preventDefault();
let html=e.dataTransfer.getData('html');
//插入HTML在DOM Tree的特定位置，不会影响内部已存在的元素，避免额外的序列化，比直接操控innerHTML高效，参考https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
zone.insertAdjacentHTML('afterbegin',html);
};
</script>
拖动元素的基本原理就是这样，后续我将展示如何编辑控件
