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

前端------拖拽事件

武飞扬头像
桃子耶耶
帮助1人

拖拽事件

在H5中实现了拖拽技术，允许用户在网页内部拖拽以及浏览器与其他应用程序之间的拖拽，通过拖拽可以传递数据。

放置元素:默认是不可以放置得 取消默认行为 event.preventDefault()

拖放元素:设置当前元素为可拖    draggable='true'

拖放事件:拖放元素使用    
        dragstart(开始拖放) drag(正在拖放) dragend(拖放结束)

  用法：on拖放事件类型

放置事件:放置元素使用        
        dragenter(进入放置元素)  dragover(放置元素内移动) drop(放置在放置元素内)

：用法：on放置事件类型

在拖拽事件中，通过DataTransfer来实现数据交互，通过event.dataTransfer来获取DataTransfer实例
方法：setData、getData、clearData

在开始拖放事件 dragstart  传输数据:event.dataTransfer.setData(); 
在放置事件drop  获取数据:event.dataTransfer.getData(); 


    拖拽事件流:dragstart->drag->dragenter->dragover->drop->drapend

案例：

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.  
    <title>Document</title>
  8.  
    <style>
  9.  
    .parent{
  10.  
    height: 200px;
  11.  
    border: 2px solid cyan;
  12.  
    }
  13.  
    .child{
  14.  
    width: 100px;
  15.  
    height: 100px;
  16.  
    background-color: blue;
  17.  
    color: white;
  18.  
    float: left;
  19.  
    margin:10px 0 0 10px;
  20.  
    }
  21.  
    body{
  22.  
    height: 400px;
  23.  
    }
  24.  
    </style>
  25.  
    <script>
  26.  
    window.onload=function(){
  27.  
    // 获取parent和child
  28.  
    var parent=document.querySelector('.parent');
  29.  
    var childs=document.querySelectorAll('.child');
  30.  
    // 将类数组转成数组
  31.  
    childs=Array.from(childs);
  32.  
     
  33.  
    // 给每一个孩子节点绑定事件方法：
  34.  
    // childs.forEach(function(item){
  35.  
    // item.onclick=function(){
  36.  
    // parent.appendChild(this)
  37.  
    // }
  38.  
    // });
  39.  
     
  40.  
     
  41.  
    childs.forEach(function(item){
  42.  
    // 拖动事件
  43.  
    // 开始拖动 on事件类型
  44.  
    item.ondragstart=function(event){
  45.  
    console.log('ondragstart开始拖动了');
  46.  
    // console.log(event,'事件对象');
  47.  
    // 将拖动元素的id传出去
  48.  
    // dataTransfer.setData 传输数据 参数(key value)
  49.  
    console.log(item.id);
  50.  
    event.dataTransfer.setData('id',item.id);
  51.  
    }
  52.  
    // 正在拖动
  53.  
    item.ondrag=function(){
  54.  
    console.log('ondrap正在拖动');
  55.  
    }
  56.  
    // 拖动结束
  57.  
    item.ondragend=function(){
  58.  
    console.log('ondragend拖动结束');
  59.  
    }
  60.  
    })
  61.  
     
  62.  
     
  63.  
    // 放置事件 --放置元素 parent
  64.  
    // 进入到放置元素
  65.  
    parent.ondragenter=function(){
  66.  
    console.log('ondragenter进入到放置元素');
  67.  
    }
  68.  
    // 在放置元素内移动
  69.  
    parent.ondragover=function(){
  70.  
    console.log('ondragover正在放置元素内移动');
  71.  
    // 将放置元素设置为可放置 取消默认 默认时不可放置
  72.  
    event.preventDefault();
  73.  
    }
  74.  
    // 将拖动元素放置到放置元素
  75.  
    parent.ondrop=function(event){
  76.  
    console.log('ondrop放置');
  77.  
    //获取拖动元素传输得数据getData(key)
  78.  
    // console.log(event.dataTransfer.getData('id'),'事件对象');
  79.  
    var id=event.dataTransfer.getData('id');
  80.  
    this.appendChild(document.querySelector('#' id))
  81.  
    // 阻止事件冒泡
  82.  
    event.stopPropagation()
  83.  
    }
  84.  
    // 将拖动元素放置到body
  85.  
    document.body.ondragover=function(){
  86.  
    console.log('ondragover正在放置元素内移动');
  87.  
    // 将放置元素设置为可放置
  88.  
    event.preventDefault();
  89.  
    }
  90.  
    // 将拖动元素放置到放置元素
  91.  
    document.body.ondrop=function(event){
  92.  
    console.log('ondrop放置');
  93.  
    //获取拖动元素传输的数据getData(key)
  94.  
    // console.log(event.dataTransfer.getData('id'),'事件对象');
  95.  
    var id=event.dataTransfer.getData('id');
  96.  
    this.appendChild(document.querySelector('#' id))
  97.  
    // 阻止事件冒泡
  98.  
    event.stopPropagation()
  99.  
    }
  100.  
     
  101.  
     
  102.  
    }
  103.  
    </script>
  104.  
    </head>
  105.  
    <body>
  106.  
    <!-- 放置元素:parent 放置事件:dragenter dragover drop-->
  107.  
    <!-- 拖动元素:child 拖动事件：dragstart drag dragend-->
  108.  
    <div class="parent"></div>
  109.  
    <!-- 设置当前元素可拖拽 draggable设置当前元素是否可拖拽 -->
  110.  
    <div class="child" id="one" draggable="true">one</div>
  111.  
    <div class="child" id="two" draggable="true">two</div>
  112.  
    <div class="child" id="three" draggable="true">three</div>
  113.  
    <div class="child" id="four" draggable="true">four</div>
  114.  
    </body>
  115.  
    </html>
学新通

学新通

难点：

在开始拖动事件dragstart中将拖动元素的id传出去

  1.  
    // dataTransfer.setData 传输数据 key value
  2.  
    event.dataTransfer.setData('id',item.id);

在放置元素内移动dragover中要将放置元素设置为可放置，默认是不可放置的

  1.  
    // 将放置元素设置为可放置
  2.  
    event.preventDefault();

将拖动元素放置到放置元素中drop获取拖动元素传输的数据getData(key)

  1.  
    //获取拖动元素传输得数据getData(key)
  2.  
     
  3.  
    var id=event.dataTransfer.getData('id');

将拖动元素放置到放置元素中drop将child添加到parent

this.appendChild(document.querySelector('#' id))

将拖动元素放置到放置元素中drop 要阻止事件冒泡

  1.  
    // 阻止事件冒泡
  2.  
    event.stopPropagation()

在放置元素内移动dragover中要将放置元素设置为可放置， 将拖动元素放置到body

  1.  
    document.body.ondragover=function(){
  2.  
    console.log('ondragover正在放置元素内移动');
  3.  
    // 将放置元素设置为可放置
  4.  
    event.preventDefault();
  5.  
    }

将拖动元素放置到放置元素中drop将拖动元素放置到放置元素  并且要阻止事件冒泡

  1.  
    document.body.ondrop=function(event){
  2.  
    console.log('ondrop放置');
  3.  
    //获取拖动元素传输得数据getData(key)
  4.  
    var id=event.dataTransfer.getData('id');
  5.  
    this.appendChild(document.querySelector('#' id))
  6.  
    // 阻止事件冒泡
  7.  
    event.stopPropagation()
  8.  
    }

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

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