menu
  • 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

HTML5笔记——拖拽

武飞扬头像
果冻OoO
帮助1人

一、拖拽元素

页面中设置了 draggable="true" 属性的元素。

draggable 属性用来定义元素是否可以拖动
该属性有 true、false两个值，默认是false
属性是true时可以拖动，反之不能

要想真正实现拖动功能，必须与JavaScript结合使用。

拖拽元素的事件监听：（应用于拖拽元素）

  • ondragstart当拖拽开始时调用

  • ondragleave 当鼠标离开拖拽元素时调用

  • ondragend 当拖拽结束时调用

  • ondrag 整个拖拽过程都会调用

  1.  
    <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head lang="en">
  4.  
    <meta charset="UTF-8">
  5.  
    <title></title>
  6.  
    <style>
  7.  
    .box {
  8.  
    width: 200px;
  9.  
    height: 200px;
  10.  
    background-color: green;
  11.  
    }
  12.  
    </style>
  13.  
    </head>
  14.  
    <body>
  15.  
    <div class="box" draggable="true"></div>
  16.  
     
  17.  
    <script>
  18.  
    var box = document.querySelector('.box');
  19.  
     
  20.  
    // 绑定拖拽事件
  21.  
     
  22.  
    // 拖拽开始
  23.  
    box.ondragstart = function () {
  24.  
    console.log('拖拽开始.');
  25.  
    }
  26.  
     
  27.  
    // 拖拽离开：鼠标拖拽时离开被拖拽的元素时触发
  28.  
    box.ondragleave = function () {
  29.  
    console.log('拖拽离开..');
  30.  
    }
  31.  
     
  32.  
    // 拖拽结束
  33.  
    box.ondragend = function () {
  34.  
    console.log('拖拽结束...');
  35.  
    console.log("---------------");
  36.  
    }
  37.  
     
  38.  
    box.ondrag = function () {
  39.  
    console.log('拖拽');
  40.  
    }
  41.  
     
  42.  
    </script>
  43.  
    </body>
  44.  
    </html>
学新通

二、目标元素

比如说，你想把元素A拖拽到元素B里，那么元素B就是目标元素。

页面中任何一个元素都可以成为目标元素。

目标元素的事件监听：（应用于目标元素）

  • ondragenter 当拖拽元素进入时调用

  • ondragover 当拖拽元素停留在目标元素上时，就会连续一直触发（不管拖拽元素此时是移动还是不动的状态）

  • ondrop 当在目标元素上松开鼠标时调用

  • ondragleave 当鼠标离开目标元素时调用

  1.  
    <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head lang="en">
  4.  
    <meta charset="UTF-8">
  5.  
    <title></title>
  6.  
    <style>
  7.  
    .one {
  8.  
    width: 100px;
  9.  
    height: 100px;
  10.  
    border: 1px solid #000;
  11.  
    background-color: green;
  12.  
    }
  13.  
     
  14.  
    .two {
  15.  
    position: relative;
  16.  
    width: 200px;
  17.  
    height: 200px;
  18.  
    left: 300px;
  19.  
    top: 100px;
  20.  
    border: 1px solid #000;
  21.  
    background-color: red;
  22.  
    }
  23.  
    </style>
  24.  
    </head>
  25.  
    <body>
  26.  
    <div class="one" draggable="true"></div>
  27.  
    <div class="two"></div>
  28.  
     
  29.  
    <script>
  30.  
    var two = document.querySelector('.two');
  31.  
     
  32.  
    //目标元素的拖拽事件
  33.  
     
  34.  
    // 当被拖拽元素进入时触发
  35.  
    two.ondragenter = function () {
  36.  
    console.log("来了.");
  37.  
    }
  38.  
     
  39.  
    // 当被拖拽元素离开时触发
  40.  
    two.ondragleave = function () {
  41.  
     
  42.  
    console.log("走了..");
  43.  
    }
  44.  
     
  45.  
    // 当拖拽元素在 目标元素上时，连续触发
  46.  
    two.ondragover = function (e) {
  47.  
    //阻止拖拽事件的默认行为
  48.  
    e.preventDefault(); //【重要】一定要加这一行代码，否则，后面的方法 ondrop() 无法触发。
  49.  
     
  50.  
    console.log("over...");
  51.  
    }
  52.  
     
  53.  
    // 当在目标元素上松开鼠标是触发
  54.  
    two.ondrop = function () {
  55.  
    console.log("松开鼠标了....");
  56.  
    }
  57.  
    </script>
  58.  
    </body>
  59.  
    </html>
学新通

注意：如果想让拖拽元素在目标元素里做点事情，就必须要在 ondragover() 里加event.preventDefault()这一行代码。

三、拖拽练习

  1.  
    <!DOCTYPE html>
  2.  
    <html>
  3.  
    <head lang="en">
  4.  
    <meta charset="UTF-8">
  5.  
    <title></title>
  6.  
    <style>
  7.  
    .one {
  8.  
    width: 400px;
  9.  
    height: 400px;
  10.  
    border: 1px solid #000;
  11.  
    }
  12.  
     
  13.  
    .one > div, .two > div {
  14.  
    width: 98px;
  15.  
    height: 98px;
  16.  
    border: 1px solid #000;
  17.  
    border-radius: 50%;
  18.  
    background-color: red;
  19.  
    float: left;
  20.  
    text-align: center;
  21.  
    line-height: 98px;
  22.  
    }
  23.  
     
  24.  
    .two {
  25.  
    width: 400px;
  26.  
    height: 400px;
  27.  
    border: 1px solid #000;
  28.  
    position: absolute;
  29.  
    left: 600px;
  30.  
    top: 200px;
  31.  
    }
  32.  
    </style>
  33.  
    </head>
  34.  
    <body>
  35.  
    <div class="one">
  36.  
    <div draggable="true">1</div>
  37.  
    <div draggable="true">2</div>
  38.  
    <div draggable="true">3</div>
  39.  
    <div draggable="true">4</div>
  40.  
    <div draggable="true">5</div>
  41.  
    <div draggable="true">6</div>
  42.  
    <div draggable="true">7</div>
  43.  
    <div draggable="true">8</div>
  44.  
    </div>
  45.  
    <div class="two"></div>
  46.  
     
  47.  
    <script>
  48.  
    var boxs = document.querySelectorAll('.one div');
  49.  
    // 临时的盒子 用于存放当前拖拽的元素
  50.  
     
  51.  
    var two = document.querySelector('.two');
  52.  
     
  53.  
    var temp = null;
  54.  
    // 给8个小盒子分别绑定拖拽事件
  55.  
    for (var i = 0; i < boxs.length; i ) {
  56.  
    boxs[i].ondragstart = function () {
  57.  
    // 保持当前拖拽的元素
  58.  
    temp = this;
  59.  
    console.log(temp);
  60.  
    }
  61.  
     
  62.  
    boxs[i].ondragend = function () {
  63.  
    // 当拖拽结束 ，清空temp
  64.  
    temp = null;
  65.  
    console.log(temp);
  66.  
    }
  67.  
    }
  68.  
     
  69.  
    // 目标元素的拖拽事件
  70.  
    two.ondragover = function (e) {
  71.  
    // 阻止拖拽的默认行为
  72.  
    e.preventDefault();
  73.  
    }
  74.  
    // 当在目标元素上松开鼠标是触发
  75.  
    two.ondrop = function () {
  76.  
    // 将拖拽的元素追加到 two里面来
  77.  
    this.appendChild(temp);
  78.  
    }
  79.  
    </script>
  80.  
    </body>
  81.  
    </html>
学新通

学新通

这篇好文章是转载于：学新通技术网

  • 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
  • 本站站名： 学新通技术网
  • 本文地址： /boutique/detail/tanhfiaaja
系列文章
更多 icon
同类精品
更多 icon
继续加载
友情链接: 申请要求：权重≥3，IP≥1000，内容属同类网站; 申请邮件： luke.wu●vfv.cc 友情链接交换群： 友情链接交换群
外链价格: 【首页 30/月 - 300/年】【内页 50/月 - 500/年】【全站 70/月 - 700/年】 购买外链请加QQ群： 站长交流群