Question

我正在使用Jquery UI将容器捕捉到我的浏览器边缘，根据位置。

我想让我的容器在掉线时顺利过渡。我尝试了许多与.animate等不同的选项但没有选项似乎没有任何问题。

我的代码：

＆＃13;

$('.container').draggable({
  grid: false,
  snap: 'body',
  snapMode: 'inner',
  snapTolerance: 40,
  start: function(event, ui) {
    $(this).css({
      left: 'auto',
      right: 'auto',
      top: 'auto',
      bottom: 'auto'
    });
  },
  stop: function(event, ui) {

    var cWidth = $(window).width() / 2;
    var cHeight = $(window).height() / 2;

    if (ui.position.left > cWidth) {
      $(this).css({
        left: 'auto',
        right: 15
      });
    } else {
      $(this).css({
        right: 'auto',
        left: 15
      });
    }

    if (ui.position.top > cHeight) {
      $(this).css({
        top: 'auto',
        bottom: 15
      });
    } else {
      $(this).css({
        bottom: 'auto',
        top: 15
      });
    }
  }
});

＆＃13;

.container {
  position: fixed;
  bottom: 15px;
  left: 15px;
  width: 100px;
  height: 100px;
  border-radius: 4px;
  background-color: black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div class="container">
</div>

＆＃13;

小提琴：https://jsfiddle.net/m8u3x7ma/12/

我非常感谢你的每一次帮助。

Jquery UI Snap平滑到浏览器边缘

0 个答案: