回到课程

在领域周围拖动 superhero

重要程度: 5

这个任务可以帮助你检查对拖放和 DOM 一些方面的理解程度。

使所有元素都具有类 draggable —— 可拖。就像章节里的球。

要求:

  • 使用事件委托来跟踪拖动的开始:document 用于 mousedown 的单个处理器。
  • 如果将元素拖动到窗口的顶部/底部 —— 页面就会允许进一步的向上/向下滚动。
  • 没有水平滚动。
  • 即使鼠标迅速移动,可拖动的元素也不应离开窗口。

这个示例太大了,不适合放在这里,但这里有相应的链接。

在新窗口中演示

打开一个任务沙箱。

我们应该把属性切换回 position:fixed 来拖动它,它让坐标管理更简单。最后,我们应该使用 position:absolute

然后,当坐标位于窗口顶部/底部时,我们使用 window.scrollTo 滚动它。

注释中有更多关于代码的细节。

使用沙箱打开解决方案。