时间戳

首页 > 解决方案 > 为什么可拖动在片段中有效，但在我的页面上无效？

jquery - 为什么可拖动在片段中有效，但在我的页面上无效？

问题描述

我想创建一个水平菜单，其中包含沿 x 轴的可拖动项目。使用 jQuery 2.1.4 和 jQuery UI 1.12.1。

不知何故，代码在模拟器中工作，但如果我在 html 测试网页上运行它，我无法区分。

var nav = $('nav');
nav.draggable({
  axis: "x",
  containment: 'draggable',
  distance: 10
});
nav {
  display: flex;
  flex-direction: row;
}

nav a {
  height: 32px;
  padding: 0 10px;
}

.draggable {
  width: 300px;
  border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


<div class="draggable">
  <nav>
    <a href="">test</a>
    <a href="">button</a>
  </nav>
</div>

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

        <style>
            nav{
                display: flex;
                flex-direction: row;
            }
            nav a{
                height: 32px;
                padding: 0 10px;
            }
            .draggable{
                width: 300px;
                border:1px solid red;
            }
        </style>

        <script>
            var nav = $('nav');
            nav.draggable({
              axis: "x",
              containment: 'draggable',
              distance: 10
            }); 
       </script>

    </head>

    <body>

        <div class="draggable" >
            <nav>
                <a href="">test</a>
                <a href="">button</a>
            </nav>
        </div>

    </body>
</html>

看起来一样，如果我在 test.html 文件中运行它，为什么它不起作用？

标签： jqueryhtmljquery-ui

解决方案

推荐阅读