JavaScript实现拖放事件

最新推荐文章于 2022-10-17 20:30:01 发布

Mr顺

最新推荐文章于 2022-10-17 20:30:01 发布

阅读量2.3k

点赞数 2

分类专栏：网页设计

本文链接：https://blog.csdn.net/qq_46144237/article/details/111147322

版权

网页设计专栏收录该内容

9 篇文章 2 订阅

订阅专栏

代码如下：

<!-- D: \code\chapter9\9-12\9-12.html -->
<!DOCTYPE HTML>
<html>
<head>
  <meta charset = "utf-8">
  <title> 拖放事件 </title>
  <style type = "text/css">
  #div1 {width:200px;height:100px;padding:10px;border:1px solid #aaaaaa;}
  </style>
  <script type = "text/javascript">
  /* ondragover 事件规定在何处放置被拖放的数据。
     默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，必须阻止对元素的默认处理方式。
     这要通过调用 ondragover 事件的 event.preventDefault() 方法*/
    function allowDrop(ev) {
      ev.preventDefault();
    }
    //ondragstart 属性调用了一个函数，drag(event)，它规定了被拖放的数据
    function drag(ev) {
      ev.dataTransfer.setData("text/plain", ev.target.id);
    }
    //当投放被拖数据时，会发生 drop 事件。
    function drop(ev) {
      ev.preventDefault();
      var data = ev.dataTransfer.getData("Text");
      ev.target.appendChild(document.getElementById(data));
    }
  </script>
</head>
<body>
  <p>可以把图片拖放到矩形中：</p>
  <div id = "div1" ondrop = "drop(event)" ondragover = "allowDrop(event)"></div>
  <br />
  <img id = "drag1" src = "files/image1.gif" draggable = "true" ondragstart = "drag(event)" />
  <!-- 为了使元素可拖放，把 draggable 属性设置为 true -->
</body>
</html>

Mr顺

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
6
评论
JavaScript实现拖放事件

代码如下：<!DOCTYPE HTML><html><head> <meta charset = "utf-8"> <title> 拖放事件 </title> <style type = "text/css"> #div1 {width:200px;height:100px;padding:10px;bord
复制链接

扫一扫