drag 简单使用方法_dragk连接-CSDN博客

本文链接：https://blog.csdn.net/xiaoxiede_wo/article/details/90722528

    <title>Document</title>
    <style>
        #item{
            width:100px;
            height: 100px;
            background:red;
        }
        #wrapper{
            height: 300px;
            width: 300px;
            border: 2px solid #000;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="item" draggable="true">被拖拽元素</div>
    <div id="wrapper">目标元素</div>
   
   <script>
        var item = document.getElementById('item')
        var wrapper = document.getElementById('wrapper');
        /**
        * 拖拽开始是触发的事件；
        */
        item.addEventListener('dragstart',function(){
            console.log('dragstart');
        })
        /**
        * 拖拽结束时触发的事件
        */
        item.addEventListener('dragend',function(){
            console.log('dragend');
        })
        /**
        * 被拖拽元素进入目标元素时触发
        */
        wrapper.addEventListener('dragenter',function(){
            console.log('enter');
        })
        /**
        * 被拖拽元素在目标元素上时触发
        */
        wrapper.addEventListener('dragover',function(e){
            e.preventDefault();
            console.log('over');
        })
        /**
        * 鼠标在目标元素上松开时触发
            触发条件：必须在阻止dragover的默认事件
        */
        wrapper.addEventListener('drop',function(){
            console.log('drop');
        })