?t=1315462873338) no-repeat -6px -3pxdisplay:blockwidth:79pxheight:33pxtext-indent:-9999px}a:hover{background-position:-87px -3px}登陆
给按钮添加一个CSS样式，让按钮距离top始终为0.<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
<style>
#button {
position: absolute
left: 500px
top: 0px
width: 100px
height: 30px
z-index: 1
}
</style>
</head>
<body>
<label>
<input type="submit" name="button" id="button" value="提交" />
</label>
</body>
</html>
背景： 最近做的页面原本有一个点赞悬浮按钮，但是在不同分辨率的移动设备屏幕上，后边的文字显示位置不固定，有的会被悬浮按钮挡住。所以加了一个拖拽功能。
参考解决办法： 狗尾草-Vue拖拽组件
遇到问题及解决：
1.unable to preventDefault inside passive event listener due to taeget being treated as passive
原因是为了滚动顺滑，touchmove等事件会被浏览器默认设置为passive：true，需要手动设置成false。参考： Unable to preventDefault inside passive event listener 。文中提到的两种办法，第一种可以，第二种css办法试了无效（可能是设置的位置不对？）
2.拖拽之后，被拖拽的组件大小会改变
我是只需要y轴拖拽，拖拽后空间的高度改变了，拖过的路径都变成了div的高度，再点击之前组件挡住的地方，会出现点击到组件的效果。解决办法是设置组件height属性。
3.设置tansition后拖拽“不动”
网上看的一个例子里边加了transition，可能是想让效果平滑一些，但是却有一种拖不动的感觉。当时以为是拖拽功能实现的有问题，于是删了换了上边链接里的方法，拖拽get√。然后试着加了一下transition，又出现了阻塞。所以这里应该是不适合用transition属性的，而且不用也挺平滑的。
学习总结：
拖拽功能的实现，主要是通过监听鼠标事件，计算各种数值，不断调整组件的位置。因此，需要复习的知识点是鼠标事件，各种尺寸数据及之间的关系。存在的不足是，虽然发现了问题并解决了，但还是不知道问题原理层面的原因。知其然，不知其所以然，希望之后能把这块补充起来。
