Question

我有这段代码：

＆＃13;

$("#drag").draggable({
  cursor: "move",
  start: function() {
    $("#drag").css("transform", "translate(0, 0)")
  }
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

拖动效果很好，但是当我将此div拖出屏幕时，我发现了一个问题。没有滚动（这很好，因为我不想滚动）所以我不能拖动这个div。我试图找到解决办法，但我发现的唯一一件事就是滚动，我不想滚动。

如何防止在屏幕外拖动？

提前致谢，对不起我的英语。

如何让可拖动的div不在屏幕之外

0 个答案: