Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

拖拽的数据传输

  昨天的文章中我们在dragstart事件参数的dataTransfer属性上调用setData方法对其绑定数据来解决了Firefox不响应事件的问题。实际上这个东西存在的目的就是为了数据传输的,我们可以将数据绑定到拖动上 ,当松开时由于目标对象接收这些数据。
  同样地,接收也是使用dataTransfer对象,只是它通常在拖动的目标放置对象的drop事件上使用。而且既然设置数据是用setData方法,获取数据的方法名当然也可以猜到,是getData。只要传入需要获取的数据MIME作为参数即可获取到数据。下面是示例代码:
<style>
div {border:1px solid red;padding:20px;float:left;cursor:move;}
</style>
<div id="a" draggable="true"></div>
<script>
document.ondrop=function(e){
  console.log(e.dataTransfer.getData("text/plain"));
};
document.ondragover=function(e){
  e.preventDefault();
};
a.ondragstart=function(e){
  console.log("start");
  e.dataTransfer.setData("text/plain","我是数据");
};
</script>
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^