html 拖拽编辑器,JS实现简单的拖动编辑器

本篇涉及的知识点有

本篇文章采用H5的拖放API，实现一个简单的控件编辑器，首先用flex布局构建一个简单的左右分栏界面，代码如下

//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;

}

//html

drag me

在H5如果想拖动一个元素非常简单，只需要将它的draggable属性设置true即可，在控件编辑器中，控件自身是一段可插入的HTML，并可以包含css和js脚本。

可拖动的元素是控件的外在展示方式，一般用icon展示，此处为了方便，选用button。我们可以在dragstart事件，给拖动的元素用dataTransfer.setData方法设置控件的HTML，然后在拖动结束后添加到Zone，代码具体如下

let target=document.getElementById('target');

let zone=document.getElementById('zone');

target.οndragstart=function (e) {

e.dataTransfer.setData('html','

Hello world

');

};

zone.οndragοver=function (e) {

e.preventDefault();

e.dataTransfer.dropEffect='copy';

};

zone.οndrοp=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);

};

拖动元素的基本原理就是这样，后续我将展示如何编辑控件