i want to make a draggable div with jquery just only move in its parentdrag only in vertical

direction

To create a draggable div with jQuery that only moves in its parent container and only in the vertical direction, you can use the jQuery UI Draggable widget and limit the movement to the y-axis using the "axis" option. Here's an example code:

HTML:

<div class="parent">
  <div class="draggable"></div>
</div>

CSS:

.parent {
  width: 300px;
  height: 300px;
  background-color: lightgray;
  position: relative;
}

.draggable {
  width: 50px;
  height: 50px;
  background-color: darkgray;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

JavaScript:

$(document).ready(function() {
  $(".draggable").draggable({
    axis: "y",
    containment: "parent"
  });
});

In this code, we first create a parent container with a fixed width and height and a gray background color. Inside the parent, we create a draggable div with a smaller size and a darker gray background color. We position the draggable div in the center of the parent using absolute positioning and the transform property.

Then, in the JavaScript code, we select the draggable div using its class name and initialize it as a draggable widget using the jQuery UI Draggable method. We set the "axis" option to "y" to only allow vertical movement, and the "containment" option to "parent" to limit the movement within the parent container.

Now, when we drag the draggable div vertically, it will move only within the parent container and not horizontally.