H5拖放API

拖放API其原理就是利用事件触发去改变元素的位置或在DOM中的结构；它分一两个场景，一个是拖，一个放。 还有一个关系场景 ，源对象与目标对象的关系。

源对象三个事件：dragstart  =>  拖动开始

                                drag  =>  拖动开始进行中

                                dragend  =>  拖动结束

想要实现鼠标跟随效果的话，就要从事件中获得鼠标的坐标；然后赋值给元素，如下代码：

      

     div.ondrag=function(e){

             var x=e.pageX;    // 获得鼠标在页面的坐标

             var x=e.pageX;   // 获得鼠标在页面的坐标

     }

需要让鼠标保持开始按下的位置的话，还需要获得刚开始的鼠标相对于元素的偏移量；也就是鼠标刚开始按在了元素的哪个位置。

          

           div.ondragstart=function(e){

                     var x=e.ofsetX;    // 获得鼠标偏移量

                     var x=e.ofsetX;   // 获得鼠标偏移量

            }

这里有个坑就是当鼠标放开时坐标会回到0，0，用if判断解决，判断当为0，0时不做元素的位置修改。

目标对象四个事件：dragenter  拖动进入

                                    dragover    拖动在目标对象上方

                                    dragleave  拖动离开

                                    drop            拖完释放

dragover完成 有个默认行为：触发dragleave 拖动离开事件，导致无法触发drop事件，要触发drop事件需要阻止默认行为。

开发中开发一些效果需要两个对象事件之间传数据，这时又有一个事件对象就登场了，这个对象就是dataTranfer.

我称之为拖拉机对象，这个事件是专门用来承载不同事件源中传输数据的，这七个事件源中都有dataTranfer对象，不过不是同一个，所以需要设置数据，可以看作是个容器。

具体用法：在源对象设置数据，然后到目标对象事件中获取数据。

                                   div.dragstart=function(){

                                          e.dataTranfer.setData( "k",  "v" )    //设置数据，只能是键值对的字符串，键相当于对象中的属性名,取数据时需要用它

                                   }

                             

                                  div2.ondrop=function{

                                         e.dataTranfer.getData( "k" )    //获取之前设置的数据

                                  }

这样就可以实现相要的效果了。