Как остановить jQuery, перетащив его из экрана?

Question

В настоящее время я изучаю Bootstrap и RWD в целом, и я хочу создать отзывчивую фотогалерею, чтобы получить опыт в этих темах.

Я уже построил 95% того, что хотел, кроме 1 штуки.

В принципе, у меня есть группа небольших изображений рядом друг с другом, и когда я нажимаю на маленькое изображение, я вижу его больше. Эта группа изображений является jQuery draggable, и проблема с этим - я могу перетащить ее с экрана, если захочу.

$("#myDraggable").draggable({ 
    scroll: true, 
    axis: "x", 
    cursor: "move"   
}); 

Что я вижу в ответах других подобных вопросов является то, что люди предлагают использовать scroll: false, но это не то, что мне нужно, так как я хочу, чтобы иметь возможность прокрутки.

У меня есть весь код, доступный на codepen: https://codepen.io/tomsoos/full/WRqeJR/

Если вы не знакомы с codepen вы можете нажать на кнопку Change View для переключения между редактором View и Full Page.

Когда вы открываете код на полной странице и пытаетесь перетащить группу изображений с экрана, вы сможете это сделать.

Мой вопрос в том, как я могу предотвратить это, но все же уметь перетаскивать эти изображения?

Answer 1

используйте опцию сдерживания, это остановит элемент, который вытаскивается из контейнера на странице. Где переданная строка является селектором jquery. посмотрите Here на документах

например.

$("#myDraggable").draggable({ 
    scroll: true, 
    axis: "x", 
    cursor: "move", 
    containment: "body" 
});