html5

原生拖放:

 

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

 

拖放事件:

 

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

 

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

 

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

 

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

 

 

在放置元素上会触发这些事件,会依次触发这些事件:

 

 

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

 

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

 

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

 

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

 

 

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方法时传递的状态对象。

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值