本篇涉及的知識(shí)點(diǎn)有

1. flex布局，參考阮一峰老師的文章
2. HTML拖放API
3. 原生JS控制HTML插入

本篇文章采用H5的拖放API，實(shí)現(xiàn)一個(gè)簡單的控件編輯器，首先用flex布局構(gòu)建一個(gè)簡單的左右分欄界面，代碼如下

//css
<style type="text/css">
    button{
      padding:5px 20px;
      background: #00a854;
    }
    .container{
      display: flex;
      flex-direction: row;
      align-items: stretch;/*默認(rèn)值，如果子元素未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度，如果子元素設(shè)置高度100%，padding或margin時(shí)會(huì)導(dǎo)致子元素溢出*/
      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如果想拖動(dòng)一個(gè)元素非常簡單，只需要將它的draggable屬性設(shè)置true即可，在控件編輯器中，控件自身是一段可插入的HTML，并可以包含css和js腳本。

可拖動(dòng)的元素是控件的外在展示方式，一般用icon展示，此處為了方便，選用button。我們可以在dragstart事件，給拖動(dòng)的元素用dataTransfer.setData方法設(shè)置控件的HTML，然后在拖動(dòng)結(jié)束后添加到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的特定位置，不會(huì)影響內(nèi)部已存在的元素，避免額外的序列化，比直接操控innerHTML高效，參考https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
    zone.insertAdjacentHTML('afterbegin',html);
  };
</script>

拖動(dòng)元素的基本原理就是這樣，后續(xù)我將展示如何編輯控件

JSBin Demo