如何使用 HTML5 拖放图像？

在本文中，我们将了解如何使用 HTML5 创建拖放功能。

方法：

• 我们给了一个矩形区域和一个图像，任务是将图像拖放到矩形中。
• 我们必须启用ondrop=”drop(event)”和ondragover=”allowDrop(event)” 制作用于图像插入的矩形。
• 图片链接使用 src 属性插入到 HTML 页面中。
• 每当我们要插入图像时，我们必须启用draggable=”true”。另外，启用ondragstart=”drag(event)” 以便可以拖动此图像以及设置图像的宽度和高度。

例子：

HTML

  

    
        How to Drag and Drop Images using HTML5 ?
    
  
    
        #div1 {
            width: 350px;
            height: 70px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }
    

  

    
        Drag the GeeksforGeeks image 
        into the rectangle:
    
  
    
    
    
      
    
  
    
        function allowDrop(ev) {
            ev.preventDefault();
        }
  
        function drag(ev) {
            ev.dataTransfer.setData("text", ev.target.id);
        }
  
        function drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("text");
            ev.target.appendChild(document.getElementById(data));
        }
    

  

输出：