H5拖拽的练习详解

效果图:

 需求:将图片在三个div中任意拖拽。

一、先给图片设置一个draggable的属性 当它为true时是允许拖动的为false就是为禁止拖拽

<img id="tp" src="./flower.jpg"  draggable="true"  >

二、在设置三个div为需要拖拽进去的空间为了方便观看设置一些css样式

 #one{
            width: 200px;
            height: 250px;
            border: 1px solid red;
            float: left;
        }
  <div id="one"></div>
  <div id="one"> </div>
  <div id="one"> </div>

三、让我们仔细思考一下你把一个瓶子平移到指定位置会发生哪些事情呢?

肯定是需要用手来触碰到瓶子，触碰到瓶子之后进行移动，移动到指定的空间位置。

这也就是代表着对应的三个事件：

ondragstart:开始拖动时触发
ondrop:拖动过程中释放鼠标键时触发
ondragover:被拖动的对象在另一对象容器范围内拖动时触发此事件

这三个怎么用呢？

ondragstart时开始时从哪里开