drag事件

简介: drag事件

生活最沉重的负担不是工作,而是无聊。——罗曼·罗兰

首先是MDNhttps://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API

然后是代码:

<!DOCTYPE html>
<html>
    <head>
        <style>
            .drop-container{
                width: 200px;
                height: 200px;
                border: 1px solid red;
                background: #eee;
            }
            .drag-ball{
                width:60px;
                height:60px;
                background: red;
                border-radius: 50%;
            }
</style>
    </head>
    <body>
        <div class="drag-ball" draggable="true" ondragstart="dragstart(event)">
        </div>
        <div class="drop-container" ondrop="drop(event)" ondragover="dragover(event)" >
        </div>
    </body>
    <script>
        function dragstart(e){
            console.log("拖动开始啦",e)
        }
        function dragover(e){
            console.log("拖到了容器中",e)
            // 此处需要阻止默认,否则将不会触发drop事件
            e.preventDefault()
        }
        function drop(e){
            console.log("放到了容器中",e)
        }
</script>
</html>


我们拖动一下,效果如下:

目录
打赏
0
0
0
0
29
分享
相关文章
点击事件中的this|click事件与change事件|v-model
点击事件中的this|click事件与change事件|v-model
68 0
|
4月前
|
oninput 和 onchange 事件有什么区别
oninput 和 onchange 事件有什么区别
274 4
|
6月前
oninput和onchange事件有什么区别?
oninput和onchange事件有什么区别? 最新推荐文章于 2024-08-14 15:45:18 发布
164 0
oninput 和 onchange 事件的区别
oninput 和 onchange 事件的区别
105 9
|
9月前
oninput事件和onchange事件的区别?
oninput事件和onchange事件的区别?
|
9月前
失焦事件和点击事件
失焦事件和点击事件
55 1
oninput和onchange事件有什么区别
oninput和onchange事件有什么区别
133 0
用 mouse 事件写一个可拖拽的 div
用 mouse 事件写一个可拖拽的 div
98 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等