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

You can achieve this by using the jQuery UI draggable() method with the containment option set to "parent". Here's an example:

HTML:

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

CSS:

#parent {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  position: relative;
}

#draggable {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
  top: 50px;
  left: 50px;
}

JavaScript:

$(function() {
  $("#draggable").draggable({
    containment: "parent"
  });
});

In this example, the parent div has a width and height of 200 pixels and a black border. The draggable div has a width and height of 50 pixels, a red background color, and is positioned absolutely within the parent div with a top and left value of 50 pixels.

The jQuery function sets the draggable() method to the draggable div and sets the containment option to "parent". This means that the draggable div can only be moved within the boundaries of the parent div.