登录  /  注册
首页 > web前端 > H5教程 > 正文

Html5拖放的实现方法

PHP中文网
发布: 2017-06-20 13:33:58
原创
1380人浏览过

今天写一下html5的拖放问题

 设置元素可以拖放

     设置元素可以拖放用draggable属性,设置为true。元素就可以拖放了。(注:火狐浏览器不支持)

 拖拽元素事件

    ondragstart:拖拽前触发

          ondrag:拖拽中连续触发

     ondragend:拖拽结束触发

 目标元素事件

    ondragenter:移入目标元素时触发

     ondragover:移入目标元素后连续触发

    ondragleave:离开目标元素触发

           ondrop:在目标元素释放鼠标触发

 

 事件的执行顺序

    1、drop不触发的时候

               dragstart>drag>dragenter>dragover>dragleave>dragend

   2、drop触发的时候(dragover的时候阻止默认事件)

              dragstart>drag>dragenter>dragover>drop>dragend

 解决火狐下的问题

   必须设置 dataTransfer对象才可以拖拽图片外的其他标签

     setData():设置数据key和value(必须是字符串)

     getData():获取数据,根据key值,获取相应的value

    offctAllowed:设置光标样式

 setDragImage:设置拖拽样式,三个参数:指定的元素、坐标X、坐标y

拖拽元素事件具体代码:

 
 
 
  charset="UTF-8">
  <span class="html-tag"></span>
 
  div{
  width: 200px;
  height: 200px;
  background: red;
  }
 
 
 
 
draggable="true">
   
 
  //获取元素
  var oDiv = document.querySelector('div');
   
  //开始拖拽时元素变为绿色
  oDiv.ondragstart = function(){
  console.log('开始拖拽时触发')
  oDiv.style.background = 'green';
  }
   
  //拖拽结束变为红色
  oDiv.ondragend = function(){
  console.log('拖拽结束触发');
  oDiv.style.background = 'red'
  }
   
  oDiv.ondrag = function(){
  console.log('拖拽时连续触发');
  }
 
 
 
   

目标元素事件具体代码

    

 
 
 
  charset="UTF-8">
  <span class="html-tag"></span>
 
  #div1{
  width: 100px;
  height: 100px;
  background: red;
  }
  #div2{
  width: 200px;
  height: 200px;
  border: solid 1px;
  }
 
 
 
 
id="div1" draggable="true">
 
id="div2">
 
  //获取元素
  var oDiv1 = document.querySelector("#div1");
  var oDiv2 = document.querySelector("#div2");
   
  //目标元素事件
  oDiv2.ondragenter = function(){
  console.log('移入目标元素触发')
  oDiv2.style.borderColor = 'blue'
  }
   
  oDiv2.ondragleave = function(){
  console.log('移除目标元素触发')
  oDiv2.style.borderColor = 'black'
  }
   
  oDiv2.ondragover = function(ev){
  console.log('移入到目标元素后连续触发');
   
  var event = window.event || ev;
  //阻止默认事件
  event.preventDefault()
   
  }
   
  //要想触发ondrop事件,必须在ondragover事件中阻止默认事件
  oDiv2.ondrop = function(){
   
  console.log('在目标元素中释放拖放元素触发')
   
  oDiv2.appendChild(oDiv1)
  }
 
 
 
   

解决火狐浏览器的拖放问题具体代码:

 
 
 
  charset="UTF-8">
  <span class="html-tag"></span>
 
  li{
  list-style: none;
  width: 100px;
  height: 40px;
  margin-top: 10px;
  background: orange;
  }
  div{
  width: 200px;
  height: 200px;
  background: red;
  margin: 0 auto;
  }
 
 
 
 
     
  • draggable="true">1
  •  
  • draggable="true">2
  •  
  • draggable="true">3
  •  
     
     
       
      var aLi = document.querySelectorAll("li");
      //目标元素事件
      var oDiv = document.querySelector("div");
      //拖放元素事件
      //解决火狐浏览器拖放问题:在开始拖放时设置setData()方法
      for(var i=0;i
       
      //添加属性,存储下标
      aLi[i].index = i;
       
      aLi[i].ondragstart = function(ev){
      var event = window.event || ev;
      event.dataTransfer.setData('test',this.index+1)
       
      //设置光标样式
      event.dataTransfer.effectAllowed = 'uninitialized';
       
      //设置拖拽样式
      event.dataTransfer.setDragImage(oDiv,100,100)
      }
      }
       
       
       
      oDiv.ondragover = function(ev){
      var event = window.event || ev;
      event.preventDefault();
      }
      //释放元素时弹框
      oDiv.ondrop = function(ev){
       
      var event = window.event || ev;
      var value = event.dataTransfer.getData('test','张三')
      alert(value)
      }
     
     
     
       

    以上就是Html5拖放的实现方法的详细内容,更多请关注php中文网其它相关文章!

    智能AI问答
    PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
    来源:php中文网
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    作者最新文章
    最新问题
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习
    PHP中文网抖音号
    发现有趣的

    Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号