0

I have this code:

$("#drag").draggable({
  cursor: "move",
  start: function() {
    $("#drag").css("transform", "translate(0, 0)")
  }
});
#main-div {
  text-align: center;
}

#drag {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 200;
}

#content {
  position: relative;
  background-color: red;
  width: 500px;
  height: 500px;
}
<div id="main-div">
  <h1>Bla bla.. Some text</h1>
</div>
<div id="drag">
  <div id="content">
    <button>I'm a button</button>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

The dragging works good but I found a problem when I drag this div out of the screen. There is no scroll (which is good because I don't want scroll) so I can't drag this div back. I tried to find solution but the only thing that I found was with scrolling and I don't want scrolling.

How can I prevent from dragging outside of the screen?

Thanks in advance and sorry for my english.

CalvT
  • 3,123
  • 6
  • 37
  • 54
Sagie
  • 996
  • 3
  • 12
  • 25
  • This question has been answered before: https://stackoverflow.com/questions/3237161/jquery-draggable-how-to-limit-the-draggable-area – Sensoray Jun 02 '17 at 14:10
  • Great, this is what I looked for. Just a little question before I mark it as duplicate: What is the differnce between the `document` string to the `window` string in this option? @CalvT – Sagie Jun 02 '17 at 14:25
  • 1
    @Sagie https://stackoverflow.com/questions/6143373/what-is-the-difference-between-the-document-selector-and-window-selector – CalvT Jun 02 '17 at 14:31

0 Answers0