HTML5 拖放简介

阅读更多

HTML5为所有HTML元素规定了一个draggable属性，表示元素是否可以拖动

    
dropzone(拖放目标区域)
draggable(被拖放元素)
说明
    

        
dragstart

        
drag

        
dragenter

        
dragover
需调用event.preventDefault()阻止默认处理
        
dragleave

        
drop
放置被拖放元素
        
dragend

    

dropEffect属性可以知道被拖动的元素能够执行哪种放置行为。这个属性有下列4个可能的值。
“none”：不能把拖动的元素放在这里。这是除文本框之外所有元素的默认值。
“move”：应该把拖动的元素移动到放置目标。
“copy”：应该把拖动的元素复制到放置目标。
“link”：表示放置目标会打开拖动的元素（但拖动的元素必须是一个链接，有URL）。


dropEffect属性只有搭配effectAllowed属性才有用。effectAllowed属性表示允许拖放元素的哪种dropEffect，effectAllowed属性可能的值如下。
“uninitialized”：没有该被拖动元素放置行为。
“none”：被拖动的元素不能有任何行为。
“copy”：只允许值为“copy”的dropEffect。
“link”：只允许值为“link”的dropEffect。
“move”:只允许值为“move”的dropEffect。
“copyLink”：允许值为“copy”和“link”的dropEffect。
“copyMove”：允许值为“copy”和”link”的dropEffect。
“linkMove”：允许职位“link”和”move”的dropEffect。
“all”：允许任意dropEffect。

请把图片拖放到矩形中：

参照：

http://www.w3cmm.com/html/drag.html
http://www.w3.org/TR/html5/editing.html#dnd
http://www.w3school.com.cn/html5/html_5_draganddrop.asp