html5

原生拖放：

 

浏览器原生支持的拖放元素只有图像链接和文本，如果别的元素也需要拖放那就需要将元素的draggable属性设置为true。

 

拖放事件：

 

在被拖放的元素中，依次触发这些事件：

 

dragstart：在刚开始按下鼠标，开始移动时会先触发这个事件。

 

drag：在元素被拖动期间会持续触发该事件。

 

dragend: 当拖动停止时触发这个事件。

 

 

在放置元素上会触发这些事件，会依次触发这些事件：

 

 

dragenter：只要有元素被拖到放置目标上，就会触发这个事件。

 

dragover：被拖动的元素还在放置目标范围内移动时就会持续触发这个事件。

 

dragleave：如果元素被拖出了放置目标就会触发这个事件。或者在不是有效的放置目标上放置元素也会触发这个事件。

 

drop：当在元素被放置在了有效目标上就会触发这个事件，不触发dragleave事件。可以将无效放置目标的dragenter和dragover事件取消默认行为来让目标改成有效放置目标。

 

 

dataTransfer对象：

 

  这个对象在所有的拖放事件中都存在于事件对象中，它有以下这些方法和属性。

 

getData(保存的数据类型)：这个方法返回在setData中设置的相应数据类型的值，或者是拖放进来的元素的url，或者是文本。拖放进来的元素可以通过url，text来获取信息，这两个类型映射为text/uri-list和text/plain。只能在drop事件中读取数据。

 

setData(数据类型，传输的信息)：这个方法可以在任何拖放事件中设置数据，在drop事件中读取数据。可以保存多个值，只要它们的类型不同就可以。

 

dropEffect：可以通过这个属性了解放置目标能执行哪些放置行为，可以直接在放置目标的dragenter事件中赋值改变这些值，改变的只是样式，真正的操作还需要自己来用js写。它有以下4种值：

 

 

none：不能把拖放的元素放在这里，这是除文本框之外所有元素的默认值。

 

move：能够移动元素到这里。

 

copy：可以复制到放置目标。

 

link：表示将会打开被拖动目标的url。

 

effectAllowed：表示允许拖动元素有哪种dropEffect，可以直接在拖放目标的dragstart事件中赋值改变这些值，改变的只是样式，它有以下这些值：

 

 

uninitialized：没有给被拖动元素设置任何放置行为。

 

　　     none：被拖动的元素不能有任何行为。

 

　　     copy：只允许值为”copy”的dropEffect。

 

　　     link：只允许值为”link”的dropEffect。

 

　　     move：只允许值为”move”的dropEffect。

 

　　     copyLink：允许值为”copy”和”link”的dropEffect。

 

　　 copyMove：允许值为”copy”和”move”的dropEffect。

 

　　 linkMove：允许值为”link”和”move”的dropEffect。

 

　　 all：允许任意dropEffect。

 

 

clearData(需要清除的类型)：清除以特定格式保存的数据。只有在被拖放元素的dragstart事件中才能调用有效果。

 

 

setDragImage(元素, 光标在元素x轴的位置, 光标在元素y中的位置): 指定一个元素,当拖动时，显示在光标下方。

 

 

types: 当前保存的所有数据的数据类型。

 

 

 

历史状态管理：

 

 

pushState(状态对象, 新状态的标题，可选的相对url)：这是history的方法，当执行这个函数，新的状态信息会被加入历史状态栈，浏览器地址也会变成新的相对url。但是，浏览器并不会向服务器发送请求。

 

replacestate(状态对象，新状态的标题)：history对象的方法，更新当前的状态对象。

 

popstate：这是一个window对象的事件，当用户点击后退或者前进时触发。这个事件对象中有一个state属性，保存的就是当执行pushstate方法时传递的状态对象。