H5鼠标拖放事件

最新推荐文章于 2022-12-23 11:35:38 发布

_忆拾

最新推荐文章于 2022-12-23 11:35:38 发布

阅读量268

点赞数 1

分类专栏：笔记文章标签： html 前端 html5

本文链接：https://blog.csdn.net/weixin_57332596/article/details/125879165

版权

HTML JavaScript 拖放事件处理图片操作

关键词由CSDN通过智能技术生成

笔记专栏收录该内容

34 篇文章 0 订阅

订阅专栏

故名思意鼠标拖动，首先写一个div，在div后边引入一张图片，再添加上可拖动属性

<body>
    <div id="res">
    </div>
    <img id="image" src="./img/熊猫烧香.png" draggable="true" width="200px" alt="">
</body>

draggable=true/false 可拖动/不可拖动

因为是给图片加的拖动事件所以拖放开始(ondragstart)属性要加到img标签上，结束位置在div里，所以给div加拖放结束(ondragover)，拖放还需要一个过程(ondrop)也是加到div里，他们都是事件，待会写的时候我们会用到事件对象，绑定方法的时候需要加上event(事件对象)，稍微加个样式美化一下

<div id="res" ondragover="dragOver(event)" ondrop="dragDown(event)"></div>
<img id="image" src="./img/熊猫烧香.png" draggable="true" ondragstart="dragBegin(event)" width="200px" alt="">

方法名可自定义 不可使用关键字

此图为样例图

拖放开始

οndragstart=“调用的方法函数”

// 拖放开始
function dragBegin(e) {
    // 存储id值
    e.dataTransfer.setData("Text", e.target.id)
}

将被拖动的属性存储

e.dataTransfer.setData("Text",even.target.id)

拖放过程

οndrοp="调用的方法函数"

function dragDown(e) {
    // 允许拖放
    e.preventDefault();
    // 获取属性并赋值给id
    var id = e.dataTransfer.getData("Text");
    // 将该元素添加到指定区域中
    e.target.appendChild(document.getElementById(id))
}

拖放结束

οndragοver="调用的方法函数"

function dragOver(e) {
    // 允许拖放
    e.preventDefault();
}

这里用到了形参和实参，形参为声明函数时括号里的参数没有实际变量，而实参是在调用函数时所写的实际参数。

举个例子

//实参
sum(1, 2)
            //形参
function sum(a, b) {
    console.log(a + b);;
}

打开之后控制台会输出3，相当于是a = 1,b=2。多次调用输出互不干涉

_忆拾

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5鼠标拖放事件

HTML5鼠标拖放事件
复制链接

扫一扫

专栏目录