HTML5新特性 拖拽使用心得

HTML5新特性 拖拽使用心得

本文主要介绍了拖拽和拖放的几个属性

先构建一个框架

        
    

        目标区域
    
  

draggable

为了使元素可拖动，将draggable属性设置为true

ondragstart

作用于拖拽元素上，当拖拽元素被拖动的时候触发此事件

ondragenter

据张鑫旭的文章《HTML5 drag & drop 拖拽与拖放简介
》中描述

ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
http://www.zhangxinxu.com/wordpress/2011/02/html5-drag-drop-%E6%8B%96%E6%8B%BD%E4%B8%8E%E6%8B%96%E6%94%BE%E7%AE%80%E4%BB%8B/

目标元素设置

    目标区域

关于这个属性，在几个主流的浏览器Safari、Chrome、Firefox、Opera下进行了测试。并不是当拖拽元素进入目标元素的时候触发，而是拖拽过程中，作用于拖拽元素上的拖拽点进入目标元素的时候触发。简而言之，就是鼠标位置进入目标元素所在区域，ondragenter事件触发，可触发多次。

ondragleave

作用于目标元素上，拖拽元素上的光标点离开目标区域时触发ondragleave属性。

ondragover

作用于目标元素上，当拖拽元素在目标元素上移动的时候触发。经测试，光标在目标元素区域内移动会触发ondragover事件，当光标落在目标区域外，即使拖拽元素仍在目标区域内，ondragover事件无法触发

    目标区域

ondrop

作用于目标元素上，当光标在目标区域内，松开鼠标时触发ondrop事件。

    目标区域

注意事项：①需要在ondragover事件中执行preventDefault()阻止默认事件，否则无法触发ondrop事件。②需要配合ondragover事件使用。

ondragend

作用于拖拽元素，拖拽完成时触发

ondragexit

据点点乐淘淘的文章《H5 拖放事件详解》描述

dragexit：当元素不再是拖动操作的直接选择元素时触发（很少使用）http://www.cnblogs.com/diantao/p/6282068.html

（既然不常用就先不研究它啦，需要的时候再补充）

贴一个小demo

    
    
    


    

        

            

        
        

            
将图片拖入此处
        
    
  

（有没有大神教我怎么在代码块内正确的写img标签，我写的发布之后总会变样了，so sad...）
欢迎小伙伴们指正