Регистрация
Личный кабинет
Регистрация
Личный кабинет

Drag scroll или панорамы и необычные слайдеры в Zero-блоке

Обычно, чтобы сделать двигающийся артборд в Zero-блоке, нужно просто выставить в настройках overflow: auto. но тогда добавляется полоса прокрутки, а перетаскивание на компьютере не работает.

И, если вам нужно именно перетаскивание, которое сработает как на десктопе, так и на мобильных устройствах, воспользуйтесь скриптом.

Всё, что вам нужно сделать — это Zero-блок, объекты которого вылезают за края артборда.
Пример слишком большой картинки, которая не влезает в артборд Zero-блока
Пример слишком большой картинки, которая не влезает в артборд Zero-блока
После этого впишите ID вашего Zero-блока сюда и скопируйте получившийся код. Если необходимо применить эффект к нескольким блокам, напишите ID этих блоков через запятую, например так: #rec11111, #rec22222, #rec33333.
<!-- Drag scroll или панорамы и необычные слайдеры в Zero-блоке | https://necodim.ru/tilda/drag -->
<script src="https://cdn.jsdelivr.net/npm/jquery.kinetic/jquery.kinetic.js"></script>
<script>
$('#rec123456789').find($('.t396__artboard')).kinetic({
    cursor: 'grab',
    x: true,
    y: true,
    filterTarget: function(target, e){
        if (!/down|start/.test(e.type)){
            return !(/area|a|input/i.test(target.tagName));
        }
    }
});
</script>
Скопировать код
Пример работы модификации
Перетащи текст (влево-вправо) или изображение (в любом направлении). Работает и в мобильных браузерах…
Очень длинный текст, который не влезает в артборд Zero-блока, зато его можно перетаскивать – просто зажмите и подвиньте

Изображение с отступами

Для подобного эффекта создайте прозрачный шейп, больший по размеру, чем само изображение, и поместите его на нижний слой.
Made on
Tilda