Html5拖放的实现方法

2025-02-19 云资源网 前端开发教程 已收录 关注 35次
当前位置：云资源网 > 技术教程 > 前端开发教程 > Html5拖放的实现方法
正文概述

今天写一下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

拖拽元素事件具体代码：

  <!DOCTYPE html>
  <html>
  <head>
  <meta charset=UTF-8>
  <title></title>
  <style type=text/css>
  div{
  width: 200px;
  height: 200px;
  background: red;
  }
  </style>
  </head>
  <body>
  <div draggable=true></div>
   
  <script type=text/javascript>
  //获取元素
  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(‘拖拽时连续触发’);
  }
  </script>
  </body>
  </html>
   

目标元素事件具体代码：

    

  <!DOCTYPE html>
  <html>
  <head>
  <meta charset=UTF-8>
  <title></title>
  <style type=text/css>
  #div1{
  width: 100px;
  height: 100px;
  background: red;
  }
  #div2{
  width: 200px;
  height: 200px;
  border: solid 1px;
  }
  </style>
  </head>
  <body>
  <div id=div1 draggable=true></div>
  <div id=div2></div>
  <script type=text/javascript>
  //获取元素
  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)
  }
  </script>
  </body>
  </html>
   

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

  <!DOCTYPE html>
  <html>
  <head>
  <meta charset=UTF-8>
  <title></title>
  <style type=text/css>
  li{
  list-style: none;
  width: 100px;
  height: 40px;
  margin-top: 10px;
  background: orange;
  }
  div{
  width: 200px;
  height: 200px;
  background: red;
  margin: 0 auto;
  }
  </style>
  </head>
  <body>
  <ul>
  <li draggable=true>1</li>
  <li draggable=true>2</li>
  <li draggable=true>3</li>
  </ul>
  <div></div>
  <script type=text/javascript>
   
  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)
  }
  </script>
  </body>
  </html>
   

以上就是Html5拖放的实现方法的详细内容，更多请关注双恒网络其它相关文章！

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！

云资源网 » Html5拖放的实现方法

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？
本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
提示下载完但解压或打开不了？
最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。 若排除这种情况，可在对应资源底部留言，或 联络我们.。
你们有qq群吗怎么加入？
当然有的，如果你是帝国cms、易优cms、和pbootcms系统的爱好者你可以加入我们的QQ千人交流群https://www.sudo1.com/page-qun.html。

云资源网 钻石

喜欢 0
分享到：

相关推荐

  • 会员数(个)
  • 12334资源数(个)
    •        
  • 资源(G)
    •        
  • 今日下载
  • 1406稳定运行(天)

提供最优质的资源集合

立即查看 了解详情