1.拖放    何为拖放

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

 2.拖放的步骤

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

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

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

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

      1  .拖动事件

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

                       ondrag           拖动

                       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;

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