HTML笔记16：HTML5拖放

拖动事件

拖动实例

     <script>
        function drag1(even){
            // 2. 定义拖动时，会发生什么
            even.dataTransfer.setData("Text",even.target.id); // 为拖拽的目标同步添加id属性和事件ondragstart
            // Text 表示数据类型
        }
        function dragover1(even){
            // 拖拽后，目标放置何处
            even.preventDefault(); // 默认地，无法将元素放置到其他元素中。如果需要设置允许放置，则必须阻止对元素的，默认处理方式。
        }
        function drop1(even){
            // 定义拖拽
            even.preventDefault();
            var data = even.dataTransfer.getData("Text");//获取被拖拽的数据。返回setData()方法中设置为相同类型的任何数据。
            even.target.appendChild(document.getElementById(data));  // data对应的是even.target.id
        }
     </script>
     <p id ="p1" draggable="true" ondragstart="drag1(event)">拖动我！</p>  <!--鼠标放置按左键，显示拖拽样式-->
     <div class= "div1" ondragover="dragover1(event)" ondrop="drop1(event)"></div>

• 拖动元素添加属性<p draggable="true">拖动我！</p>
• 定义拖动ondragstart
• 设置目标释放后，放置的位置ondragover
• 释放目标ondrag

参考

1. HTML拖放
2. ondrag 事件
3. HTML DOM 事件对象