Навигация
Получить консультацию менеджера
Нажимая на кнопку "Перезвонить мне" Вы соглашаетесь с политикой конфиденциальности
Социальные сети
Иконка ВК
Иконка Instagram
Иконка Телеграмм
Иконка Яндекс.Дзен
Перетаскивание элементов в Zero блоке

Обратите внимание. Техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода.

Данная модификация добавит больше интерактива на Ваш сайт, без применения сложного кода
Идеально для прогрева пользователей, геймификации сайта или добавить необычный элемент на сайт любой компании.
Отличная возможность добавить изюминку в Ваш проект.
Обратите внимание, что данный эффект будет работать как на десктоп версии сайта, так и на мобильной версии сайта без модификации текущего кода. Внутри кода также стоят заметки для Вашего удобства.
Как это выглядит?
Хотите скидку на наши услуги или товары?
Переместите зеленую карточку на черный фон и Вы получите промокод
Ловлю зеленую карточку
Как это добавить?
Первый шаг
Создаём Zero блок. В него добавляем Shape, которые будут вариантами ответов
Второй шаг
Задаем CSS классы для Shape. Для правильного ответ - dragtrue, для неверного ответа - dragfalse
Задаем CSS класс для того Shape, который ловит ответы - drag-container
Создаем Pop-UP через стандартное меню блоков и присваиваем CSS класс - uc-popuppromocode
Если у Вас есть кнопка, которая должна появиться для показа промокода, задаем ей CSS класс - promocode
Третий шаг
Создаём блок T123 и помещаем стиль, который дан ниже.

<!--Взято с сайта https://digistudio.su/peretaskivanie-ehlementov-v-zero-bloke-->

<script>
$(document).ready(function(){
     $(".dragfalse").draggable({
        snap:true,
        scroll: true,
        revert:true
     });
     
     $(".dragtrue").draggable({
         revert:true,
         snap:true,
     });
    $(".drag-container").droppable({    //Настройки области куда перетаскиваем элементы
      accept:".dragtrue",   //Область принимает только правильный ответ с классом .dragtrue
     drop:function(){   //Задаем нужные функции, которые выполняться при перетаскивании верного ответа в зону контейнера
         $(".dragtrue").css("display", "none");
         $('.uc-popuppromocode .t-popup').addClass('t-popup_show');
         $('.promocode').addClass('promocode-view').removeClass('promocode'); 
         $('.true-answer').addClass('true-answer-view').removeClass('true-answer');
      }
   });

});
</script>

<style>

/*Для верного ответа задаем класс элементу в зеро-блоке — dragtrue,
для неверного — dragfalse, также области, которая будет принимать верный ответ задаем класс — drag-container*/
/*Для блока с попапом задаем класс uc-popuppromocode, в примере используется попап BF503*/

/*Задаем z-index перетаскиваемым элементам, чтобы были поверх всех остальных*/
.dragtrue, .dragfalse{
    z-index:9999 !important;
} 
 
 /*Настройки попапа*/
.uc-popuppromocode .t-popup.t-popup_show{
    display: block !important;
    opacity: 1 !important;
    transition: .3s ease-in-out;
}

/*Стили кнопки промокода в зероблоке*/
.promocode{     /*Изначально кнопка скрыта*/ 
    opacity:0;
    pointer-events:none;
}

.promocode-view{      /*Кнопка появляется при перетягивании верного ответа*/
    opacity:1;
    cursor:pointer;
    transition: .3s ease-in-out;
}

/*Стили правильного ответа*/
.true-answer{     /*Правильный ответ изначально скрыта*/
  opacity:0; 
  pointer-events:none;
}
.true-answer-view{  /*Правильный ответ появляется при перетягивании верного ответа*/
    opacity:1;
    cursor:pointer;
    transition: .3s ease-in-out;
}
</style>

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
Как Вам модификация?
Made on
Tilda