接受拖过来的元素要接受新元素，ondragover 事件触发的时候要禁止自设的默认事件e.preventDefault()
监听ondrop事件，将元素进行插入appendChild；
题主是否想询问“html点击按钮移动矩形怎么操作”？WPS中，插入圆角矩形后，点击选中圆角矩形，这时会在圆角矩形的左上角显示一个小小的橙色的点，这个橙色小点就是圆角半径的控制点了，只要把鼠标放到橙色小点上，鼠标的图标就会变成一个小三角形，这时按下鼠标左键，然后左右拖动，就可以改变圆角半径了。松开鼠标左键则停止调节，在图形的左上角有个黄色的点，鼠标点住这个点拖动就会调整弧度大小。html5 拖动效果在手机上实现方法是调用drag和drop一系列函数实现的。
注意：拖拽源在拖拽操作结束将得到dragend事件对象，不管操作成功与否。
举例：
定义可拖放内容
<div id="columns">
<div class="column" draggable="true"><header>A</header></div>
<div class="column" draggable="true"><header>B</header></div>
<div class="column" draggable="true"><header>C</header></div>
</div>
2、监听拖动事件
可附加大量不同事件以监听整个拖放过程：
dragstart
drag
dragenter
dragleave
dragover
drop
dragend
a.这里是开始拖拽
function handleDragStart(e) {
this.style.opacity = '0.4' // this / e.target is the source node.
}
var cols = document.querySelectorAll('#columns .column')
[].forEach.call(cols, function(col) {
col.addEventListener('dragstart', handleDragStart, false)
})
b.dragenter、dragover 和 dragleave 事件处理程序可用于在拖动过程中提供额外的可视化提示。例如，在拖动期间将鼠标悬停在某一列上方时，其边框可能会变成虚线。这样，用户就能知道这些列也是放置的目标区域。
