javascript - 如何拖动屏幕并捕捉到一个div?

标签 javascript jquery html css

我将更详细地解释我的意思: 有一种方法可以通过用光标拖动它或用手指触摸它来使整个屏幕移动。然后,您又可以捕捉到离您位置最近的 div。 div 还能够根据分辨率和更改屏幕大小进行调整。 这是主要示例:http://making.gene.com/1/start/

我对如何实现这一点很感兴趣,并且我已经对这个主题进行了研究。 有许多 jquery 插件可让您捕捉到 div,或在屏幕上移动对象,但没有达到我想要的程度。

这是我的第一篇文章,所以如果我可以添加对您有帮助的内容,请告诉我。

这是一个捕捉到 div 的例子,这是我能找到的最多的例子。

<script src="src/jquery.scrollsnap.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(document).scrollsnap({
        snaps: '.snap',
        proximity: 50
    });
});
</script>

这让您可以在滚动到 div 附近时捕捉到它,同时还可以更改捕捉时的邻近度。

最佳答案

试试这个 http://guidobouman.github.io/jquery-panelsnap/

这个插件捕捉部分

<!doctype html>
<html>
  <head>
    <script src="/path/to/jquery.js"></script>
    <script src="/path/to/jquery.panelSnap.js"></script>
    <script>
      jQuery(function($) {
        $('body').panelSnap();
      });
    </script>
  </head>
  <body>
    <section>
      ...
    </section>
    <section>
      ...
    </section>
    <section>
      ...
    </section>
  </body>
</html>

关于javascript - 如何拖动屏幕并捕捉到一个div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23904524/

相关文章:

javascript - 如何保存 Tensorflow.js 模型?

javascript - 当使用 Javascript 调整屏幕大小时覆盖样式(由之前的函数给出)

php - 如何通过 Jquery.post 发布 JSON 多维数据?

javascript - 粘性导航菜单

html - 在html代码中插入一个字符串

javascript - 使用 D3.js 的 3 维(X、Y 和 Z)图

javascript - 单击重置按钮后,公司文本字段将被禁用并更改背景颜色

javascript - 如果 id 不在使用 jQuery 的 JSON 中,如何隐藏 li 标签?

javascript - 单击另一个 Accordion 时隐藏打开/事件的 Accordion

javascript - HTML/Javascript 在页面加载时获取变量