作为一个前端小能手，不得不说dataTransfer在拖动+放置网页元素这件事儿上实在太重要了。咱们做页面经常得用到这个功能？那你知道吗，dataTransfer不仅是事件对象的一部分，还能帮忙传递数据，这样我们就能在拖拽和放置的时候轻松分享数据~
dataTransfer对象的基本认识
你要弄明白dataTransfer是什么东东，它主要是用来传递拖放时的数据滴。虽然只能在拖放那一刹那用上，但理解这玩意儿并不难，对？一开始可能会觉得有点晕乎，但多试几次就行。
dataTransfer对象的属性和方法
说起这个dataTransfer对象，那可是拖放事件的利器咋？你想把数据交给人家，就可以用setData（）这个办法；等你想要数据回来，再拿getData（）这个招式使出来就能轻松搞掂。有了这两样神奇的功能，在拖放事件中传个数据、取个数据简直就像玩游戏一样简单，让大家用得更舒心！
数据类型的选择与兼容性
选择好dataTransfer对象的数据类型非常重要哈。IE浏览器只支持”text”和”URL”这两种，但是HTML5就加了好多MIME类型。为了保证旧版浏览器也能运行，HTML5还是保留了”text”和”URL”，然后把它们换成了”text/plain”或”text/url-list”。这样一来，我写跨浏览器代码就方便多了！
数据的保存与读取
dataTransfer这个地方可以存放各种各样的MIME类型数值，但只有在触发drop事件的时候才会显示出来哟。只要你把东西一丢进这里面，就可以轻松获取之前保存过的数据！我曾经就用这招实现了一个拖拽图片自动上传到服务器的功能，真的是超实用~
自定义数据的传递
除了系统自己处理的内容和网页外，当咱们在拖拽文件时，“开始拖拽”那会儿，可以用setData()这招，手动把想要传递的东西存到那儿去。这么干，就能随心所欲地调整数据，让用户感受到更贴心的服务！
数据类型的重要性
要做个数据传输的小程序，得提前知道要用哪种数据类型因为所有浏览器都支持它，所以在获取网址信息时，我会看看里面有没有”URL”或”text/uri-list”；如果是文字，那就用”Text”。虽然有点儿费劲，但总比出错强。
跨浏览器的挑战
虽然现在的浏览器对dataTransfer对象的支持挺好的，但老版IE浏览器还有点儿小问题。比如说，IE10以前的版本有些特别的MIME类型就不认得了，如果碰上不会读的数据类型，那就得卡住了。所以我们在码代码时得顾及到这点，想个办法搞定它，让程序能正常运行。
dataTransfer对象的更多功能
dataTransfer可不只是传数据那么简单，它还可以告诉我们被拖过去的东西以及放哪的目的地都会发生什么变化！比如说，通过看dropEffect这个属性，我们就晓得了被拖的东东能干些啥了，对设计高级拖拽效果来说可是很实用的哟。
总结与反思
- 梦龙小站
- 梦龙小站
- 梦龙小站
梦龙小站
快来试试dataTransfer，你肯定会被它在拖拽中的强大功能吓到！传数据？那简直轻而易举，还有各种神奇的功能提高你的使用体验！但记住，用得溜不溜就看你懂不懂它的属性和方法了，当然也别忘了考虑到不同浏览器的兼容问题。
我回去会好好琢磨一下dataTransfer对象还有哪些新鲜玩意儿，希望越多越好的浏览器也赶紧加入进来支持并优化它。那现在，我就想问问你们：在用dataTransfer遇到啥麻烦事儿没？你们都是咋搞定的呀？别藏私，都快点留言分享出来！别忘了点赞转发一波，让更多人受益
li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;}
#p1{ width:100px; height:100px; background:red; margin:300px;}
评论0