HTML5 拖放Drag&Drop+完整示例

最新推荐文章于 2021-06-11 12:33:56 发布

cokeoscar

最新推荐文章于 2021-06-11 12:33:56 发布

阅读量139

点赞数

分类专栏： HTML 文章标签： html5 js

本文链接：https://blog.csdn.net/cokeoscar/article/details/115697272

版权

本文介绍了如何使用HTML5的拖放API来实现图片拖放到框内以及在多个框间自由拖动的功能。涉及到的关键技术包括ondrop、ondragover、ondragstart等事件处理。

摘要由CSDN通过智能技术生成

使用到的API介绍

目标元素中：
οndrοp=“drop(event)” ——目标元素完全接受被拖放元素时触发
οndragοver=“allowDrop(event)”——被拖放元素在目标元素中移动时触发
拖放元素中：
οndragstart=“drag(event)”——被拖放元素在开始拖放时触发

拖动图片放入框中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dragpic</title>
    <style type="text/css">
        #div1{
    
            width:80px;
            height: 80px;
            padding: 80px;
            border: 1px solid #aaaaaa;
        }
    </style>
    <script>        
        function allowDrop(ev){
           
            //避免浏览器对数据默认处理，drop事件的默认行为是以链接打开     
            ev.preventDefault(