0

I want to create a horizontal menu with draggable items along the x axis. Using jQuery 2.1.4 and jQuery UI 1.12.1.

Somehow the code works within the simulator, but not if I run it on a html test webpage and I can not tell the difference.

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>

Looks like the same thing, why is it not working if I run it within my test.html file?

merlin
  • 2,717
  • 3
  • 29
  • 59
  • You need to put your JS code in a document.ready event handler. The snippet editor above, and also Codepen/jsFiddle, does this for you automatically. Without it you're attempting to access the DOM before it has been fully loaded. See: http://learn.jquery.com/using-jquery-core/document-ready/ – Rory McCrossan Apr 18 '19 at 21:32
  • Thank you Rory. That has brought me a bit closer to a solution of my initial problem. It works in my minimal example now, but still not on my page despite integrating document ready. https://stackoverflow.com/questions/55743152/why-does-event-on-drag-not-have-any-effect-with-jquery-implementation – merlin Apr 18 '19 at 21:43
  • I can confirm that the above example is working on desktop now after putting it inside document ready. On mobile simultor chrome however it does not. – merlin Apr 19 '19 at 06:57
  • found it. Seems jQuery UI does not support touch events. There is a fix: http://touchpunch.furf.com/ – merlin Apr 19 '19 at 08:21

0 Answers0