h5文字拖拽

最新推荐文章于 2021-06-03 10:47:18 发布

weixin_43380553

最新推荐文章于 2021-06-03 10:47:18 发布

阅读量348

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/weixin_43380553/article/details/104065506

版权

Title 拖拽文字1

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


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .div1{
            color: #CC3300;
            width: 100px;
            height: 100px;
            border: 1px solid red;
            position: relative;
            margin-left:20px;
            float: left;
        }
        .div2{
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            position: relative;
            margin-left:20px;
            float: left;
        }
        p{
            background-color: orange;
            margin-top: 5px;
        }
    </style>
</head>
<body>
<div id="div1" class="div1"><p id="pe"  draggable="true">拖拽文字1</p></div>
<div id="div2" class="div2"></div>
<script>
    var p=document.querySelector('#pe');
    var div1=document.querySelector('#div1');
    var div2=document.querySelector('#div2');
    // div1.ondragover=function (e) {
    //     e.preventDefault();
    // }
    //
    // div1.ondrop=function () {
    //     console.log("456");
    //     div1.appendChild(p);
    //
    // }
    // div2.ondragover=function (e) {
    //     e.preventDefault();
    // }
    // div2.ondrop=function () {
    //     console.log('123');
    //     div2.appendChild(p);
    // }
    // div2.ondragenter=function(){
    //     console.log("ondragenter");
    // }
    div2.ondragover=function(e){
        //console.log("ondragover");
        /*如果想触发ondrop事件，那么就必须在这个位置阻止浏览器的默认行为*/
        e.preventDefault();
    }
    /*浏览器默认会阻止ondrop事件：我们必须在ondragover中阻止浏览器的默认行为*/
    div2.ondrop=function(){
        console.log("ondrop");
        /*添加被拖拽的元素到当前目标元素*/
        div2.appendChild(p);
    }
    // div2.ondragleave=function(){
    //     console.log("目标元素：ondragleave");
    // }

    div1.ondragover=function(e){
        //console.log("ondragover");
        /*如果想触发ondrop事件，那么就必须在这个位置阻止浏览器的默认行为*/
        e.preventDefault();
    }
    div1.ondrop=function(){
        console.log("ondrop");
        /*添加被拖拽的元素到当前目标元素*/
        div1.appendChild(p);
    }

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