史上最详细的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/


相关文章
|
2月前
|
XML 消息中间件 JavaScript
从0开始学习JavaScript--JavaScript DOM操作与事件处理
在前端开发中,DOM(文档对象模型)是一个至关重要的概念,它为JavaScript提供了一种与HTML和XML文档交互的方法。本文将深入探讨DOM的概念与作用,以及JavaScript与DOM之间的密切关系。
|
2月前
|
JavaScript
js_操作dom(委托和冒泡事件)
js_操作dom(委托和冒泡事件)
20 0
|
12月前
|
XML JavaScript 前端开发
|
2月前
|
存储 JavaScript 前端开发
JavaScript:DOM事件
JavaScript:DOM事件
45 0
|
12月前
|
JavaScript
JS(Dom事件操作)第十九
JS(Dom事件操作)第十九
165 0
|
7月前
|
JavaScript 前端开发
原生JavaScript之dom表单改变和鼠标常用事件
那么好,本次我们聊聊表单改变时如何利用onchange方法来触发input改变事件以及鼠标常用的滑入滑出,点击down和点击up事件.
36 2
|
8月前
|
JavaScript 前端开发 API
JavaScript事件处理:探索DOM事件和事件监听器
JavaScript事件处理:探索DOM事件和事件监听器
49 0
|
10月前
|
JavaScript 前端开发
JS 学习笔记四(DOM) 悬停事件 获取节点
JS 学习笔记四(DOM) 悬停事件 获取节点
45 0
|
11月前
|
JavaScript 前端开发
JavaScript -- DOM事件
JavaScript -- DOM事件
|
11月前
|
存储 JavaScript 前端开发
JavaScript Day11 DOM事件机制
JavaScript Day11 DOM事件机制
53 0