首页  >  文章  >  web前端  >  Html5拖放的实现方法

Html5拖放的实现方法

PHP中文网
PHP中文网原创
2017-06-20 13:33:581577浏览

今天写一下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">
 
 
 
 
draggable="true">
   
 
 
 
   

目标元素事件具体代码

    

 
 
 
  charset="UTF-8">
  <span class="html-tag">
 
 
 
 
id="div1" draggable="true">
 
id="div2">
 
 
 
   

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

 
 
 
  charset="UTF-8">
  <span class="html-tag">
 
 
 
 
 
  • draggable="true">1
  •  
  • draggable="true">2
  •  
  • draggable="true">3
  •  
     
     
     
     
       

    以上是Html5拖放的实现方法的详细内容。更多信息请关注PHP中文网其他相关文章!

    声明:
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn