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

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

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

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

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

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

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

Если вы не знакомы с codepen, вы можете нажать кнопку "Изменить вид", чтобы изменить вид редактора и полную страницу.

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

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