Can only drag along with axis y : UI Draggable « jQuery « JavaScript Tutorial






  1. JavaScript Tutorial
  2. jQuery
  3. UI Draggable
<html lang="en">
<head>
  <title></title>
  <link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="js/ui/ui.core.js"></script>
  <script type="text/javascript" src="js/ui/ui.draggable.js"></script>
  <link type="text/css" href="js/demos.css" rel="stylesheet" />
  <script type="text/javascript">
    $(function() {
        //define config object
        var dragOpts = {
          cursor: "move",
          axis: "y",
          distance: "30",
          cursorAt: {
            top: 0,
            left: 0
          } 
        };

        $("#drag").draggable(dragOpts);
    });
  </script>
</head>
<body>
    <div id="drag">Move me</div>
</body>
</html>








30.142.UI Draggable
30.142.1.jQuery UI Draggable - Constrain movement
30.142.2.jQuery UI Draggable - Cursor style
30.142.3.jQuery UI Draggable - Default functionality
30.142.4.jQuery UI Draggable - Delay start
30.142.5.jQuery UI Draggable - Events
30.142.6.jQuery UI Draggable - Handles
30.142.7.jQuery UI Draggable - Revert position
30.142.8.jQuery UI Draggable - Auto-scroll
30.142.9.jQuery UI Draggable - Snap to element or grid
30.142.10.jQuery UI Draggable + Sortable
30.142.11.jQuery UI Draggable - Visual feedback
30.142.12.Change cursor for draggable tag
30.142.13.Set cursor position for the draggable
30.142.14.Can only drag along with axis y
30.142.15.Drag delay
30.142.16.Drag along a grid
30.142.17.revert: true (fly back)
30.142.18.Add border to the draggable
30.142.19.Only draggable inside parent
30.142.20.Snap to another
30.142.21.start and stop events
30.142.22.Add dragging stopped event handler
30.142.23.Disable, enable and destroy the draggable object
30.142.24.Set the handles for all directions
30.142.25.Add knobHandles