HTML关于拖放的Js事件所完成的拖放效果（MDN官方示例详解）

一  效果图展示与粗略讲解

（示例原文：HTMLElement：drag 事件 - Web API 接口参考 | MDN）

        先上一波效果图，图中可以看出把带“有白色背景的div元素”进行了拖动，且拖动过程中如果鼠标指针不在“下方紫色区域”范围内，鼠标的光标状态为“禁用”。

        在“下方紫色区域”范围内，光标即为正常状态的原因是此范围的div元素添加了dragover事件，没有添加此事件的范围均为光标“禁用”状态

二  如何实现上方的效果（示例图中颜色变化未实现，对整个拖拽事件来说不主要）  

        说完了上面效果图的的特点，具体来说怎么实现，HTML5规范了一个元素属性draggable，除图片与链接元素以外，此属性在任何元素上默认都为false。但是如果要实现拖动效果，这个属性是必不可少的。先上代码

  HTML代码部分

<div class="dropzone">
  <div id="draggable" draggable=&#