HTML5 --拖放

最新推荐文章于 2024-04-20 11:06:33 发布

gxgalaxy

最新推荐文章于 2024-04-20 11:06:33 发布

阅读量210

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/gxgalaxy/article/details/108135297

版权

HTML5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

拖放（Drag 和 drop）是 HTML5 标准的组成部分。

1、拖放

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。

2、浏览器支持

IE9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

3、可拖放属性draggable

把 draggable 属性设置为 true，就使元素变成了可拖放的。默认情况下，图像、链接、文本是可以拖动的，文本只有在被选中的情况下才能拖动，而图像和链接在任何时候都可以拖动

  <div id="box1" draggable="true"></div>

4、事件对象dataTransfer

dataTransfer对象主要有两个方法：setData() 和 getData(),getData()可以取得由setData()保存的值。
设置文本数据

    div.ondragstart = function(e){
        e.dataTransfer.setData("Text",e.target.id);
    }

接收文本数据

  boxDiv.ondrop = function(e){
      var data = e.dataTransfer.getData('Text');
      e.target.appendChild(document.getElementById(data));
    }

5、拖放事件

拖动某元素时，将依次触发下列事件：

(1)dragstart:按下鼠标并开始移动时，会在被拖放的元素上触发dragstart事件
(2)drag：触发dragstart事件后，随即就会触发drag事件，元素被拖动期间会持续触发该事件
(3)dragend：当拖动停止时（无论是把该元素放到了有效的放置目标上还是放到了无效的放置目标上），会触发dragend事件

当某个元素被拖动到一个有效的放置目标上时，下列事件会依次触发：

(1)dragenter：只要有拖动元素被拖动到放置目标上，就会触发dragenter事件
(2)dragover：在被拖动元素爱放置目标的范围内移动时，就会持续触发改事件
(3)dragleave 或drop：当被拖动元素拖出了放置目标，将触发dragleave事件，如果元素被放到了放置目标中，则会触发drop，而不会触发dragleave事件。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() 方法：

    boxDiv.ondragover = function(e){
      e.preventDefault();
    }

例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
      margin: 0;
    }
    .myDiv1{
      float: left;
      width: 100px;
      height: 100px;
      background-color: blue;
      margin: 0;
    }
    .box{
      float: left;
      width: 100px;
      height: 100px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
    <div draggable="true" class="myDiv1" id="myDiv"></div>
    <div class="box"></div>
  <script>
    var div = document.getElementById('myDiv');
    var boxDiv = document.getElementsByClassName('box')[0];
    div.ondragstart = function(e){
      // 设置数据
        e.dataTransfer.setData("Text",e.target.id);
    }
    boxDiv.ondragover = function(e){
      e.preventDefault();
    }
    boxDiv.ondrop = function(e){
      // 获取数据
      var data = e.dataTransfer.getData('Text');
      e.target.appendChild(document.getElementById(data));
    }
  </script>
</body>
</html>

在这里插入图片描述

也可以定义一个dragDom将被拖放元素保存下来

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box1,#box2{
      width: 100px;
      float: left;
      height: 100px;
      border: 1px solid black;
    }
    #box1{
      background-color: aqua;
      margin-right: 10px;
    }
  </style>
</head>
<body>
  <div id="box1" draggable="true"></div>
  <div id="box2"></div>
  <script>
    let box1 = document.getElementById('box1');
    let box2 = document.getElementById('box2');
    let dragDom;
    box1.ondrag = function(e){
      dragDom = e.target;
    }
    box2.ondragover = function(e){
      e.preventDefault();
    }
    box2.ondrop = function(e){
      box2.appendChild(dragDom); 
    }
  </script>
</body>
</html>