史上最详细的DOM事件之拖动事件

简介: 史上最详细的DOM事件之拖动事件上篇博客讲了DOM的剪贴板事件,这篇博客我们来讲一讲DOM的拖动(DragEvent)事件。HTMl代码: <img src="../../CSS/0421/car.jpg" draggable="false"> 1JS代码: var oImg=document.getElementsByTagName("img")[0]; // DragEvent 拖动事件 // ondrag 该事件在元素正在拖动时触发 oImg.ondrag=function(ev){ console

史上最详细的DOM事件之拖动事件




上篇博客讲了DOM的剪贴板事件,这篇博客我们来讲一讲DOM的拖动(DragEvent)事件。


HTMl代码:


<imgsrc="../../CSS/0421/car.jpg"draggable="false">

JS代码:


var oImg=document.getElementsByTagName("img")[0];
    // DragEvent  拖动事件
    // ondrag 该事件在元素正在拖动时触发  
    oImg.ondrag=function(ev){
        console.log("ondrag事件");
        console.log(ev);
    }
    // ondragend  该事件在用户完成元素的拖动时触发  
    // ondragenter  该事件在拖动的元素进入放置目标时触发  
    // ondragleave  该事件在拖动元素离开放置目标时触发  
    // ondragover 该事件在拖动元素在放置目标上时触发  
    // ondragstart  该事件在用户开始拖动元素时触发  
    // ondrop 该事件在拖动元素放置在目标区域时触发


注意:主要针对图片(img)。


视频讲解链接:
https://www.bilibili.com/video/BV1yi4y147gD/


相关文章
|
6月前
|
XML 消息中间件 JavaScript
从0开始学习JavaScript--JavaScript DOM操作与事件处理
在前端开发中,DOM(文档对象模型)是一个至关重要的概念,它为JavaScript提供了一种与HTML和XML文档交互的方法。本文将深入探讨DOM的概念与作用,以及JavaScript与DOM之间的密切关系。
|
2月前
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
22 5
|
1月前
|
JavaScript 前端开发 API
深入理解jQuery:高效DOM操作与事件处理
【10月更文挑战第11天】深入理解jQuery:高效DOM操作与事件处理
16 0
|
2月前
|
前端开发 JavaScript
CSS中禁用DOM事件
CSS中禁用DOM事件
|
4月前
|
移动开发 JavaScript 前端开发
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
42 0
|
6月前
|
JavaScript
js_操作dom(委托和冒泡事件)
js_操作dom(委托和冒泡事件)
40 0
|
XML JavaScript 前端开发
|
JavaScript
JS(Dom事件操作)第十九
JS(Dom事件操作)第十九
185 0
|
6月前
|
存储 JavaScript 前端开发
JavaScript:DOM事件
JavaScript:DOM事件
54 0
|
11月前
|
JavaScript 前端开发
原生JavaScript之dom表单改变和鼠标常用事件
那么好,本次我们聊聊表单改变时如何利用onchange方法来触发input改变事件以及鼠标常用的滑入滑出,点击down和点击up事件.
52 2