Использую библиотеку JQUERY UI.
При перетаскивании drag1 на drop1 должен появиться arr3[0]-CAT, при перетаскивании drag2 на drop2 должен появиться arr3[1]-DOG, при перетаскивании drag3 на drop3 должен появиться arr3[2]-BERD. На данный момент появляется только arr3[2]-BERD, причем сразу и неважно какой drag был перемещен. Как исправить ошибку?
<style>
div[id^="drag"]{
background-color:orange;
width: 7rem;
height: 3rem;
display:inline-block;
color: white;
}
div[id^="drop"]{
background-color:green;
width: 7rem;
height: 3rem;
display:inline-block;
color: white;
}
</style>
<div id="enlg">
<div id="drag1">drag1</div>
<div id="drag2">drag2</div>
<div id="drag3">drag3</div>
</div>
<div id="prepos">
<div id="drop1">drop1</div>
<div id="drop2">drop2</div>
<div id="drop3">drop3</div>
</div>
<script>
var arr3=['CAT','DOG', 'BERD'];
$(document).ready(function() {
var drag="#drag";
for(i=1; i<=3;i++){
var a=String(i);
var b="#drag"+a;
var c="#drop"+a;
$(b).draggable(700);
$(c).droppable({accept:b,hoverClass:"drags"},{drop:function(e, ui){
$(this).html(ui.draggable.remove().html());
$(this).droppable('destroy');
$(this).addClass("ui-state-highlight");
if($('#drag1'))
{ $(c).html(arr3[0]);
}
if($('#drag1')){
$(c).html(arr3[1]);
}
if($('#drag2')){
$(c).html(arr3[2]);
} } })}
})