js之拖放API

1.拖放？   何为拖放？

       拖放(拖拽)就是把抓取的对象拖动并防止在其他位置。如下图所示。

 2.拖放的步骤

       1）将想要拖放的对象元素的draggable属性值设置为'true'(img/a元素默认允许拖放)。

       2）编写与拖放处理相关的事件代码。

 3.以上提到，拖放是要编写拖放事件的代码的，那么，拖放事件包含什么呢？

     我们通过拖放事件，可以处理拖放相关的各个方面1）哪里发生了拖放2）被拖动的元素有什么事件触发3）要放置被拖动的元素的元素有什么事件触发，拖放，有以下事件：

      1  .拖动事件：

                      ondragstart       开始拖动，元素默认不可拖放，设置元素的draggable的值为'true'，可实现可拖动（img/a除外）

                       ondrag           拖动

扫描二维码关注公众号，回复： 3936318 查看本文章

                       dragend         拖动结束

      2   .放置事件：

                    ondragenter      将元素拖动到放置元素触发   拖出放置元素，触发dragleave事件

                     ondragover       在放置元素内移动时触发的事件

                     drop                   放置时触发

           拖放的生命周期：dragstart  --->  drag  -->dragenter --->dragover --->drop--->dragend

    4.拖放的实现。

        1.拖放对象设置为可拖放，   元素--->draggable='true'.

        2.自定义放置目标，所有元素都支持放置目标事件，但这些元素默认是不允许放置。所以，可以自定义他们的放置事件

  使其成为有效的放置目标，方法是重写drapenter和drapover事件的默认行为，阻止默认行为，以dropover为例，因为要实现

多个拖放事件，所以，以函数来实现    

function  dragOver(event){
         event.preventDefault();
}
    //调用
    item.ondragover =dragOver;

      3.以上，虽然阻止了默认行为，但是，还是无法放置，为什么呢？把一个元素拖拽至令以元素中，他的数据没放进去，怎么会拖拽成功呢？事件对象有一个属性event.dataTansfer,用于从被拖动元素向放置元素传递数据（以字符串格式），所以事件对象处理程序中，拖动时设置该属性的值，并在放置时获取。即将dataTransfer对象setData()方法获取的值，通过getData()方法获取

function dragStrat(event){
    event.dataTransfer.setData(text/plain,'text');
}
    item.ondragstart= dragStart;
function drop(event){
    //getData()方法接收一个值
    event.dataTransfer.getData(text/plain);
}
    item.ondrop=drop;

以上，拖放事件的基本过程已实现。