CSS/JS Анимация перетаскивание и последующее вращение
Пытаюсь заменить flash на JavaScript. Математика нач. школы. Например 2х2=/пустой div/ Ниже - варианты ответа /55, 47, 4, .../ Если перетащить div с правильным ответом на пустой div, то оставшиеся должны закрутиться. Без клика, просто по событию перетаскивания. Перетаскивание работает. А вращение работает только по клику, каждый div отдельно. Пытался заменить click на onmousup - не вращаются. Подскажите, как это реализовать. Я не программист, просто делаю для себя понемногу. Беру примеры из сети и переделываю под свои задачи.
var items;
$(".d1").draggable();
$(".d2").draggable();
$(".d3").draggable();
$(".d4").draggable();
$(".d5").draggable();
$(".d6").draggable();
$(".d7").draggable();
$(".d8").draggable();
$("#droppable").droppable({
drop: function(event, ui) {
items = [ui.draggable];
//alert( ui.draggable.attr('id') );
var i = 1;
$('.bottle').on('click', function(e) {
this.removeAttribute('style');
var deg = 3000 + Math.round(Math.random() * 500);
deg = ((-1) ^ i) * deg;
var css = '-webkit-transform: rotate(' + deg + 'deg);';
this.setAttribute('style', css);
i++;
});
}
});div.circle {
display: inline-block;
float: left;
width: 48px;
height: 48px;
margin: 100px 2px 0 2px;
border: 2px solid;
border-radius: 50%;
font-size: 28px;
line-height: 46px;
text-align: center;
cursor: pointer;
}
#droppable {
position: absolute;
left: 250px;
top: 0;
}
.bottle {
-webkit-transition: -webkit-transform 6s ease-out;
}<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="droppable" class="circle"></div>
<div id="55" class="circle d1 bottle">55</div>
<div id="47" class="circle d2 bottle">47</div>
<div id="4" class="circle d3 bottle">4</div>
<div id="24" class="circle d4 bottle">24</div>
<div id="16" class="circle d5 bottle">16</div>
<div id="82" class="circle d6 bottle">82</div>
<div id="96" class="circle d7 bottle">96</div>
<div id="10" class="circle d8 bottle">10</div>