HTML5_拖放（Drag 和 Drop）

拖放：即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

1. 定义可拖拽元素

   • 添加 draggable 属性

     • true，表示元素可以被拖拽
     • false，表示元素不可以被拖拽

   • 添加事件处理程序属性ondragstart

   xxxxxxxxxx
   <p id="con" draggable="true" ondragstart="dragstart(event)">
        我是可拖拽内容
   </p>
   <script>
        function dragstart(e){
            console.log(e)//打印事件对象
        }
   </script>
   

2. 定义拖拽数据

   每个 drag event（拖拽事件对象）都有一个dataTransfer属性，它持有拖拽数据。这个属性也有管理拖拽数据的方法。

   setData(数据类型，数据值)方法可以为拖拽数据添加一个项。

   xxxxxxxxxx
    function dragstart(e){
        console.log(e)//打印事件对象
        // 添加拖拽数据
        e.dataTransfer.setData("text/plain", e.target.innerText);
        } 
   

3. 定义拖拽图像

   dataTransfer.setDragImage(image, xOffset, yOffset) 方法自定义一张图片。

   xxxxxxxxxx
       // 定义拖拽图片
           var img = new Image();
           img.src = './拖放/assets/dog.jpg';
           function dragstart(e) {
               e.dataTransfer.setData("text/plain", e.target.innerText)
               console.log(e)
               // 设置拖拽图片
               e.dataTransfer.setDragImage(img, 10, 10);
   
           }
   

4. 定义放置区

   当拖拽一个对象到 HTML 元素中时，浏览器默认不会有任何响应。

   想要让一个元素变成可放置区，该元素必须设置 ondragover 和 ondrop 事件处理程序属性。

   • ondragover：当元素被拖到放置区上时触发，这个时候可以去检验拖拽数据的类型，返回false则阻止放置，返回true则允许放置。
   • ondrop：当元素在放置区被放置时触发。

   xxxxxxxxxx
   <h5>放置区域</h5>
   <div style="width:200px;height:200px;border:3px solid blue" ondragover="dragover(event)" ondrop="drop(event)">
   </div>
   
   

   xxxxxxxxxx
   // 当元素或选中的文本被拖到一个放置区上时触发
   function dragover(event) {
       event.preventDefault()
      // 检查类型
       if (event.dataTransfer.types.includes('text/plain')) {
                return true//返回true则允许放置
        }
       return false//返回false则不允许放置
   
   }
   // 放置处理函数
   function drop(e) {
       e.preventDefault()
       // 获取拖拽的数据
       var data = e.dataTransfer.getData("text/plain");
         console.log(data)
          // 将拖拽过来的数据放置在放置区
          e.target.textContent = data;
   }
   

实时效果反馈

1.事件对象的哪个属性包含数据：

A dataTransfer

B  data

答案

1=>A