javascript拖动元素到另一个元素当中，使用拖放事件dragstart\drag\dragend和dragenter\dragover\dragleave

cdcdhj

于 2023-10-09 20:37:19 发布

阅读量261

点赞数

分类专栏： javascript学习日记文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/cdcdhj/article/details/133715324

版权

javascript学习日记专栏收录该内容

123 篇文章 0 订阅

订阅专栏

只是一个测试，给了一定的方法和思路知道拖动事件对于拖动元素到另一个元素当中的过程和设置属性

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="UTF-8"></html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>拖动元素到另外一个元素当中</title>
       <script type="text/javascript" src="common.js"></script>
       <style type="text/css">
            #container
            {
                border:1px solid red;
                width: 300px;
                height: 300px;
            }
            #getmsg 
            {
                border: 1px solid blue;
                width: 200px;
                height: 200px;
                margin-top: 20px;
            }
        </style>
    </head>
    <body>
        <div id="container">
            
        </div>
        <div id="getmsg" draggable="true"><img src="images/email.jpg" draggable="true"/></div>
        <script type="text/javascript">
            var drop=document.getElementById("getmsg");
            
            var prc=[];
            
            drop.addEventListener('dragstart',function(e){
                console.log('开始拖动');
                //将拖动元素放进数组
                prc[0]=drop;
                //设置需要传递的数据
                e.dataTransfer.setData('text','1245dfdf');
                //这两项都必须设置成move，被拖动目标才能放进放置目标中
                e.dataTransfer.dropEffect="move";
                e.dataTransfer.effectAllowed="move";

            });
            drop.addEventListener('drag',function(){
                console.log('拖动中');
            });

            drop.addEventListener('dragend',function(){
                console.log('拖动结束');
            });

            var container=document.getElementById("container");
            container.addEventListener('dragenter',function(){
                console.log('源对象进入目标对象');
            });
            container.addEventListener('dragover',function(e){
                e.preventDefault();
                console.log('源对象悬停目标对象');
            });
            container.addEventListener('dragleave',function(){
                console.log('源对象离开目标对象');
            });
            container.addEventListener('drop',function(e){
                console.log('源对象释放目标对象');
                //得到数据
                console.log(e.dataTransfer.getData('text'));
                //将拖动目标添加到放置目标当中
                this.appendChild(prc[0]);
            });
            
        </script>
    </body>
</html>

最后得到的截图
拖动之前
在这里插入图片描述
拖动到红色框中

cdcdhj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript拖动元素到另一个元素当中，使用拖放事件dragstart\drag\dragend和dragenter\dragover\dragleave

只是一个测试，给了一定的方法和思路知道拖动事件对于拖动元素到另一个元素当中的过程和设置属性。//这两项都必须设置成move，被拖动目标才能放进放置目标中。//将拖动目标添加到放置目标当中。//将拖动元素放进数组。//设置需要传递的数据。'源对象进入目标对象''源对象悬停目标对象''源对象离开目标对象''源对象释放目标对象'
复制链接

扫一扫