【H5】浏览器内拖拽文字与图片：

最新推荐文章于 2021-06-03 16:43:07 发布

舜岳

最新推荐文章于 2021-06-03 16:43:07 发布

阅读量1.1k

点赞数

分类专栏： HTML5 文章标签： HTML5

本文链接：https://blog.csdn.net/qq_41614928/article/details/90402309

版权

HTML5 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

【H5】浏览器内拖拽文字与图片：

效果图如下：

在这里插入图片描述

dataTransfer.getData(‘Text’); //拿到的是文本内容

let fileData = e.dataTransfer.files.item(0);
let reader = new FileReader(); // 读取文本的信息；
reader.readAsDataURL(fileData); //读取文件内容进行onload加载

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        #box{
            width:80%;
            height:200px;
            background-color: #f00;
            margin:50px auto;
            font-size: 40px;
            color: #fff;
        }
        .aa{
            width: 100px;
            height: 30px;
            border: 5px solid #ccc;
        }
        .aa:active{
            border: 5px solid #000;
        }
    </style>
</head>
<body>
    
    <img src='1.jpg' width='300'/>
    这里是拖拽的文字样式，这里是拖拽的文字样式！

    <div class="aa">点击拿图片</div>
    <div class="aa">点击拿文本</div>
    <div id="box"></div>
    
    <script>
        /*
            FileReader API 用于读取文件，即把文件内容读入内存，是一种异步文件读取机制，它的参数是 File 对象或 Blob 对象。对于不同类型的文件，FileReader 提供不同的方法读取文件。
        */
        const box = document.getElementById("box");
        const aa = document.getElementsByClassName("aa");
        let float = true;
        aa[0].onclick = function(){
            float = true;
        }
        aa[1].onclick = function(){
            float = false;
        }
        box.ondragover = function( e ){     //当有物体拖动上来时触发
            e.preventDefault();     //阻止默认事件
            e.stopPropagation();    //阻止冒泡事件
            return false;
        }
        box.ondrop = function(e){   //拖动在物体上释放鼠标时触发
            //数据处理
            let dataTransfer = e.dataTransfer;
            console.log( dataTransfer )
            if(!float){
                let text = dataTransfer.getData('Text');    //是文字拿到Text
                console.log( text )
                this.innerHTML = `${text}`
                return false;
            }
            //url对象
            let url = dataTransfer.getData('url');      //是图片拿到路径
            console.log(url)
            this.innerHTML = `<img width="300" src='${url}'/>`
            

            //一下是通过FileReade()获取图片的base64编码  它是对图片本身字节进行编码不是路径 可以说就是一张图片
            let fileData = e.dataTransfer.files.item(0);
            if(fileData===null)return;  //不是外部拖入的图片跳出，内部拖入图片没有fileData
            console.log( fileData)
            //new FileReade() 读取文本的信息
            let reader = new FileReader(); // 读取文本的信息；
            reader.readAsDataURL(fileData); //读取文件内容 进行onload加载
            //进行加载：
            reader.onload = function(e){
                console.log( reader.result )  //读到该文本的结果；
                box.innerHTML = `<img width="300" src='${reader.result}'/>`;
            }
            
            e.preventDefault();     //阻止默认事件
            e.stopPropagation();    //阻止冒泡事件
            return false;
        }

    </script>
</body>
</html>

舜岳

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【H5】浏览器内拖拽文字与图片：

【H5】浏览器内拖拽文字与图片：效果图如下：dataTransfer.getData(‘Text’); //拿到的是文本内容let fileData = e.dataTransfer.files.item(0);let reader = new FileReader(); // 读取文本的信息；reader.readAsDataURL(fileData); //读取文件...
复制链接

扫一扫