JS实现简单的拖动编辑器

本篇涉及的知识点有

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

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

//css


//html

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

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


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

JSBin Demo

你可能感兴趣的:(JS实现简单的拖动编辑器)