Question

我想创建一个水平菜单，其中沿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文件中运行它，为什么它不起作用？

为什么可拖动功能在代码段中有效，但在我的页面上却不可用？

0 个答案: