HTML5拖拽

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

拖拽和释放

拖拽：Drag
释放：Drop
拖拽指的是鼠标点击源对象后一直移动对象不松手，一但松手即释放了

设置元素为可拖放

draggable 属性：就是标签元素要设置draggable=true，否则不会有效果
注意：链接和图片默认是可拖动的，不需要 draggable 属性。

拖拽API的相关事件

被拖动的源对象可以触发的事件：
(1)ondragstart：源对象开始被拖动
(2)ondrag：源对象被拖动过程中(鼠标可能在移动也可能未移动)
(3)ondragend：源对象被拖动结束
拖动源对象可以进入到上方的目标对象可以触发的事件：

(1)ondragenter：目标对象被源对象拖动着进入
(2)ondragover：目标对象被源对象拖动着悬停在上方
(3)ondragleave：源对象拖动着离开了目标对象
(4)ondrop：源对象拖动着在目标对象上方释放/松手

拖拽API总共就是7个函数！！

DataTransfer

在进行拖放操作时，DataTransfer 对象用来保存被拖动的数据。它可以保存一项或多项数据、一种或者多种数据类型

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 * {
  margin: 0;
  padding: 0;
 }
 div {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  float: left;
  margin: 10px;
 }
 div:nth-child(2) {
  border: 1px solid green;
 }
 div:last-child {
  border: 1px solid blue;
 }
 p {
  height: 25px;
  background-color: pink;
  line-height: 25px;
  text-align: center;
 }
 </style>
</head>
<body>
 <div id="div1">
  <p id="p1" draggable="true">拖拽内容</p>
 </div>
 <div id="div2"></div>
 <div id="div3"></div>
 <script>
 // 完整的拖拽   +  释放   
 // 1. 我们有很多盒子， 那个需要拖放 就 给这个盒子设置 可拖放效果
 // 2. 找到源文件 设置拖拽效果 
 // (1)ondragstart：源对象开始被拖动
  var p = document.querySelector("#p1");
  p.ondragstart = function() {
   console.log("源对象开始被拖动");
  }
 // (2)ondrag：源对象被拖动过程中(鼠标可能在移动也可能未移动)
  p.ondrag = function() {
   console.log("源对象被拖动过程中");
   // 不断的执行
  }
 // (3)ondragend：源对象被拖动结束
   p.ondragend = function() {
   console.log("源对象被拖动结束");
  }
 // 3. 找到目标文件  设置 释放效果  onmouseenter   onmouseover 
     var target = document.querySelector("#div2");
   //  (1)ondragenter：目标对象被源对象拖动着进入
   target.ondragenter = function() {
    console.log("目标对象被源对象拖动着进入");
   }
 // (2)ondragover：目标对象被源对象拖动着悬停在上方
  target.ondragover = function(e) {
    console.log("目标对象被源对象悬停在上方");
    // 不断的执行
    // 如果想要触发 ondrop 事件 则需要在over 里面 阻止  默认行为
    return false;
    // e.preventDefault()
   }
 // (3)ondragleave：源对象拖动着离开了目标对象
  target.ondragleave = function() {
    console.log("离开了");
   }
 // (4)ondrop：源对象拖动着在目标对象上方释放/松手
  target.ondrop = function() {
    console.log("上方释放/松手");
   }
 </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 * {
  margin: 0;
  padding: 0;
 }
 div {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  float: left;
  margin: 10px;
 }
 div:nth-child(2) {
  border: 1px solid green;
 }
 div:nth-child(3){
  border: 1px solid blue;
 }
 p {
  height: 25px;
  background-color: pink;
  line-height: 25px;
  text-align: center;
 }
 </style>
</head>
<body>
 <div id="div1">
  <p id="p1" draggable="true">拖拽内容1</p>
  <p id="p2" draggable="true">拖拽内容2</p>
  <p id="p3" draggable="true">拖拽内容3</p>
  <p id="p4" draggable="true">拖拽内容4</p>
 </div>
 <div id="div2"></div>
 <div id="div3"></div>
 <script>
 // 完整的拖拽   +  释放   
 // 1. 我们有很多盒子， 那个需要拖放 就 给这个盒子设置 可拖放效果
 // 2. 找到源文件 设置拖拽效果 
 // (1)ondragstart：源对象开始被拖动
  // var p = document.querySelector("#p1");
   var obj = null; // 用于存放我们拖放对象 源对象
  document.ondragstart = function(event) {
   console.log("源对象开始被拖动");
   // event.target  事件对象里面的事件目标
   console.log(event.target);
   obj = event.target;  // 把当前对象给 obj 然后追加到 新目标对象里面就阔以了
  }
 // (2)ondrag：源对象被拖动过程中(鼠标可能在移动也可能未移动)
  document.ondrag = function() {
   console.log("源对象被拖动过程中");
   // 不断的执行
  }
 // (3)ondragend：源对象被拖动结束
   document.ondragend = function() {
   console.log("源对象被拖动结束");
  }
 // 3. 找到目标对象  设置 释放效果  onmouseenter   onmouseover 
     var target = document.querySelector("#div2");
   //  (1)ondragenter：目标对象被源对象拖动着进入
   target.ondragenter = function() {
    console.log("目标对象被源对象拖动着进入");
   }
 // (2)ondragover：目标对象被源对象拖动着悬停在上方
  target.ondragover = function(e) {
    console.log("目标对象被源对象悬停在上方");
    // 不断的执行
    // 如果想要触发 ondrop 事件 则需要在over 里面 阻止  默认行为
    return false;
    // e.preventDefault()
   }
 // (3)ondragleave：源对象拖动着离开了目标对象
  target.ondragleave = function() {
    console.log("离开了");
   }
 // (4)ondrop：源对象拖动着在目标对象上方释放/松手 
  target.ondrop = function() {
    console.log("上方释放/松手");
    // 当我们的源对象 在 目标对象上  释放   就可以吧 源对象放入目标对象里面了 追加
    // 目标对象. appendChild(源对象)
    this.appendChild(obj);
    // 拖拽的时候 ，不用删除原来的  
   }
 </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 * {
  margin: 0;
  padding: 0;
 }
 div {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  float: left;
  margin: 10px;
 }
 div:nth-child(2) {
  border: 1px solid green;
 }
 div:nth-child(3){
  border: 1px solid blue;
 }
 p {
  height: 25px;
  background-color: pink;
  line-height: 25px;
  text-align: center;
 }
 </style>
</head>
<body>
 <div id="div1">
  <p id="p1" draggable="true">拖拽内容1</p>
  <p id="p2" draggable="true">拖拽内容2</p>
  <p id="p3" draggable="true">拖拽内容3</p>
  <p id="p4" draggable="true">拖拽内容4</p>
 </div>
 <div id="div2"></div>
 <div id="div3"></div>
 <script>
 // 完整的拖拽   +  释放   
 // 1. 我们有很多盒子， 那个需要拖放 就 给这个盒子设置 可拖放效果
 // 2. 找到源文件 设置拖拽效果 
 // (1)ondragstart：源对象开始被拖动
  // var p = document.querySelector("#p1");
  //var obj = null;  用于存放我们拖放对象 源对象
  document.ondragstart = function(event) {
   console.log("源对象开始被拖动");
   // event.target  事件对象里面的事件目标
   console.log(event.target.id);
    //obj = event.target;  把当前对象给 obj 然后追加到 新目标对象里面就阔以了
    // event.dataTransfer.setData("类型", 数据) 在我们start 里面设置 当我们开始拖拽的时候，就存储数据
    // 类型  text/html   URL  
    // 记录 当前源对象的id 名字
    event.dataTransfer.setData("text/html", event.target.id);  
    // 我们传递的是 id  字符型形式  text
  }
 // (2)ondrag：源对象被拖动过程中(鼠标可能在移动也可能未移动)
  document.ondrag = function() {
   console.log("源对象被拖动过程中");
   // 不断的执行
  }
 // (3)ondragend：源对象被拖动结束
   document.ondragend = function() {
   console.log("源对象被拖动结束");
  }
 // 3. 找到目标对象  设置 释放效果  onmouseenter   onmouseover 
     // var target = document.querySelector("#div2");
   //  (1)ondragenter：目标对象被源对象拖动着进入
   document.ondragenter = function(event) {
    console.log("目标对象被源对象拖动着进入");
    console.log(event.target);
   }
 // (2)ondragover：目标对象被源对象拖动着悬停在上方
  document.ondragover = function(e) {
    console.log("目标对象被源对象悬停在上方");
    // 不断的执行
    // 如果想要触发 ondrop 事件 则需要在over 里面 阻止  默认行为
    return false;
    // e.preventDefault()
   }
 // (3)ondragleave：源对象拖动着离开了目标对象
  document.ondragleave = function() {
    console.log("离开了");
   }
 // (4)ondrop：源对象拖动着在目标对象上方释放/松手 
  document.ondrop = function(event) {
    console.log("上方释放/松手");
    // 当我们的源对象 在 目标对象上  释放   就可以吧 源对象放入目标对象里面了 追加
    // 目标对象. appendChild(源对象)
    // event.target.appendChild(obj);
    // 拖拽的时候 ，不用删除原来的  
    // 获取 dataTransfer里面的数据
    var id = event.dataTransfer.getData("text/html");
    // console.log(id);
    event.target.appendChild(document.getElementById(id));
    // 因为我们追加的 源对象  p  id 只是id名字， 需要 通过id 获取元素 追加到 目标对象里面
    // 所以我们 document.getElementById(id)
   }
 </script>
</body>
</html>

posted @ 2020-02-15 16:19 阳神阅读(124) 评论(0) 编辑收藏举报

刷新页面返回顶部

阳神

HTML5拖拽

拖拽和释放

设置元素为可拖放

拖拽API的相关事件

DataTransfer

公告