<!--https://dsgnmax.ru/drag--> <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>