2019-07-06

拖放（Drag和drop）是 HTML5 标准的组成部分，拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放，非常的好用和重要的，接下来我就简单介绍一下。

拖放的过程：

    拖动开始——>拖动过程——>拖动结束

拖放用到的相关函数：

    被拖放的元素：

        (1)ondragstart：源对象开始被拖动

        (2)ondrag：源对象被拖动过程中(鼠标可能在移动也可能未移动)

        (3)ondragend：源对象被拖动结束

    目的对象：

        (1)ondragenter：目标对象被源对象拖动着进入

        (2)ondragover：目标对象被源对象拖动着悬停在上方

        (3)ondragleave：源对象拖动着离开了目标对象

        (4)ondrop：源对象拖动着在目标对象上方释放/松手

拖放的简单步骤

1、设置元素为可拖放

    首先，为了使元素可拖动，把draggable属性设置为true。

2、设置被拖动的函数

    添加ondragstart事件，这个属性会调用了一个函数，drag(event)，它规定了被拖动的数据。

    函数中的dataTransfer.setData()方法设置被拖数据的数据类型和值。

    例子：

    function drag(ev)

    {

        ev.dataTransfer.setData("Text",ev.target.id);

    }

    传送数据的数据类型是 "Text"，值是被拖动元素的id。

3、设置目的对象的函数

    （1）放到何处

        添加ondragover事件，这个属性规定在何处放置被拖动的数据。

        默认地，无法将数据/元素放置到其他元素中。

        这要通过调用ondragover事件的 event.preventDefault()方法：

        function allowDrop(ev)

        {

            ev.preventDefault();

        }

    （2）进行放置

        添加ondrop事件，当放置被拖数据时，会发生ondrop事件。

        ondrop 属性调用了一个函数，drop(event)：

        function drop(ev)

        {

            ev.preventDefault();

            var data=ev.dataTransfer.getData("Text");

            ev.target.appendChild(document.getElementById(data));

        }

        重点：

        调用preventDefault()来避免浏览器对数据的默认处理（drop事件的默认行为是以链接形式打开）。

        通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。被拖数据是被拖元素的id。

        最后一行代码是把被拖元素追加到放置元素（目标元素）中。

自己写的一个菜谱菜单的简单的小例子，与大家分享下：

   

   

   

   

   

       

菜谱

       

           

               

                   

                   

                   

                   

                   

               

           

炒土豆————10元

炒土豆————10元

炒土豆————10元

炒土豆————10元

炒土豆————10元

       

   

   

       

菜单