Как в jquery draggable запретить перемещение за окно +растояние сверху?

Question

[Aligatro]

Добрый день друзья, подскажите пожалуйста как для jquery ui draggable запретить вылезать за окно более чем на 100px?

То есть как оставить принцип работы containment 'window' но при этом разрешить вылазить справа и слева на -100px и не дать перекрыть фиксированный скроллбар размером в 60px сверху?

Большое спасибо за помощь.

Answer 1

[Сергей Тутуков]

codepen.io/STutukov/pen/ggLyLV

Comments

[Aligatro]

Спасибо большое за помощь, но подобное решение мне не подойдет, так как при помощи массива позиций можно задать границы максимум по всему документу, а мне необходимо задать границы по видимым границам окна, плюс разрешить вылазить за него слева на 50 пикселей например.

[Сергей Тутуков]

$(document) поменять на $(window)?
пример обновил

[Aligatro]

Смотрите, если делать блок фиксированным, то я например на середине странице могу его забросить за границы сверху или снизу и больше его не найти, в этом и есть загвоздка codepen.io/anon/pen/mROgjd
Но все равно большое спасибо. Походу элегантного решения нету, пойду придумаю костыль ))

[Сергей Тутуков]

Aligatro: я кажется стал понимать, что нужно)
1. Если тебе нужно сделать, чтобы драг-блок был всегда в поле видимости, то помести его в фиксированный блок

.wrapper{
  position: fixed;
  left: -100px;
  right: -100px;
  top:-100px;
  bottom: -100px;
  overflow: hidden;
}

- соотвественно драг по containment: 'parent'
2. Если блок должен оставаться в том месте, где ты его оставил на странице. То тебе нужно событие старт

drag: function( event, ui ) {
     $( "#draggable" ).draggable( "option", "containment", [x1, y1, x2, y2 ]);
      start: function( event, ui ) {
        x1 = -10;
        x2 = $(window).width() - $('#draggable').outerWidth() + 10;
        y1 = $(window).scrollTop() - 10;
        y2 = $(window).height() - $('#draggable').outerHeight() + $(window).scrollTop() + 10;
        $( "#draggable" ).draggable( "option", "containment", [x1, y1, x2, y2]);
      }
     $(window).scrollTop() - на сколько px прокручена страница

}

[Aligatro]

Сергей Тутуков: Вот с враппером крутая идея, правда я хотел сделать на всю страницу =)) Спасибо, вот такой костыль я как раз и использую.