js实现图片的拖动

最新推荐文章于 2024-06-27 16:14:54 发布

sh2001824

最新推荐文章于 2024-06-27 16:14:54 发布

阅读量3.5k

点赞数 3

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/sh2001824/article/details/125875898

版权

本文介绍了如何利用JavaScript的draggable属性以及ondragstart、ondragover、ondrop等事件来实现图片的拖放操作。通过设置元素的draggable属性为true，可以开启拖放功能。在拖放过程中，使用dataTransfer.getData()获取拖放数据，通过preventDefault()允许拖放，并使用appendChild()方法将图片添加到目标位置。示例包括将图片从外部拖入方框以及在两个方框间进行拖放。

摘要由CSDN通过智能技术生成

我们要想拖动就要设置元素可以拖动：draggable属性有false和true两个值当值为true元素就是可以拖动的

        <img src="img/flower.jpg" draggable="true">

ondragstart:该事件表示拖动开始
ondragover:该事件表示拖动结束
ondrog:该事件表示拖放过程
dataTransfer.getData()：方法设置被拖数据的数据类型和值
preventDefault()：允许其他元素拖到此处
appendChild将一个标签添加到另一个标签中，可以使用appendChild

1.实现一个图片在外面被拖到方框里面

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width&#