HTML5 拖放（Drag和Drop）

1.设置元素可拖放

为了使元素可拖放，把draggable属性设置为true；

<img draggable="true">

拖放什么-ondragstart和setData()

ondragstart属性调用了一个函数，drag(event)，规定被拖动的数据dataTransefer.setData()方法设置被拖数据的数据类型和值。

放到何处-ondragover

ondragover事件规定在何处放置被拖动的数据。

进行放置-ondrop

ondragover 事件规定在何处放置被拖动的数据。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

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

效果如下：

 

代码示例：

<p>请将下面图片拖入到框中</p>
    <!-- 
        ondragstart：该事件表示拖放开始
        ondragover：该事件表示拖放结束
        ondrop：该事件表示拖放过程
     -->
     <div id="result" ondragover="allowDrag(event)" ondrop="drop(event)"></div>
     <!-- draggable:值为true时表示元素可拖动，默认为false，表示不能拖动 -->
     <img src="./img/flower.jpg" id="resul" alt="" draggable="true" ondragstart="drag(event)">
     <script type="text/javascript">
        //1.拖动开始
        function drag(ev){
            ev.dataTransfer.setData("Text",ev.target.id);
        }
        //2.拖动过程
        function drop(ev){
            //允许其他元素拖放到此处
            ev.preventDefault();
            //获取要拖放元素的id
            var id=ev.dataTransfer.getData("Text");
            //将一个标签加到另一个标签中，可以使用appendChild();
            ev.target.appendChild(document.getElementById(id));
        }
        //3.拖动结束      
        function allowDrag(ev){
            //允许其他元素拖放到此处
            ev.preventDefault();
        }  
    </script>