HTML5 实现页面图片的拖拉效果

最新推荐文章于 2021-06-23 03:06:37 发布

越V越

最新推荐文章于 2021-06-23 03:06:37 发布

阅读量563

点赞数

文章标签： html

本文链接：https://blog.youkuaiyun.com/zhengyue1314/article/details/106072008

版权

这篇博客介绍如何使用HTML5实现图片在页面不同区域间的拖放效果。通过设置dragstart、dragover和drop事件，可以允许用户将图片从一个div拖放到另一个div中，实现图片的动态移动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面分为上下两个div，div1中放置一张图片，可实现拖拽至div2中，代码为了省事，全放入html文件，

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style type="text/css">
           mark{
               background-color: red;
           }
       </style>
       <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
   </head>
   <body>

<div id="box1" style="border: 1px solid black;width: 550px; height: 300px;">
           <img id="img1" src="img/1.jpg" draggable="true" />
       </div>
       <div id="box2" style="border: 1px solid black;width: 550px; height: 300px;">

       </div>
       <script type="text/javascript" charset="utf-8">
           window.onload = function(){
               var box1 = document.getElementById("box1")
               var box2 = document.getElementById("box2")
               var img1 = document.getElementById("img1")
               //box1的图片拖放到box2
               //设置想拖放的内容
               img1.ondragstart = function(e){
                   var data = e.dataTransfer
                   data.setData("text/plain",this.id)
               }
               //设置目标元素允许接受拖放元素
               box2.ondragover = function(e){
                   e.preventDefault()
               }
               //取出拖放的内容
               box2.ondrop = function(e){
                   var data = e.dataTransfer
                   var text = data.getData("text/plain")
                   //插入
                   e.target.appendChild(document.getElementById(text))
               }
               //box2的内容拖到box1
               box1.ondragover = function(e){
                   e.preventDefault()
               }
               box1.ondrop = function(e){
                   var data = e.dataTransfer
                   var text = data.getData("text/plain")
                   //插入
                   e.target.appendChild(document.getElementById(text))
               }
           }

       </script>
   </body>
</html>