[rita]

Использую JQUERY UI, при перетаскивании элемента drag на div, исчезает последний элемент , хотя должен исчезать после его перетаскивания - каждый элемент, по факту только последний.
Что сделать, чтобы после перетаскивания элемента он исчезал?

<link href="JQ/jquery-ui.css" rel="stylesheet">
<script src="JQ/external/jquery/jquery.js"></script>
<script src="JQ/jquery-ui.js"></script>
<style>
div[id^="drag"]
{background-color: orange;
height: 3rem;
width: 6rem;
display:inline-block;
div[id^="div"]
{padding: 8px;
border: 3px solid #5aff10;
background-color: #23cc3c;
border-radius: 23px;
padding: 18px;
    width: 12rem;
width: 35rem;
</style>

<div id="enlg">
		<div id="drag1">
		 <b>drag1</b>
		</div>
		<div id="drag2">
		<b>drag2</b>
		</div>
		<div id="drag3">
		<b>drag3</b>
		</div>
		</div>
<div id="prepos">
<div id="div1">
Я <b>div1</b>
</div>
<div id="div2">
Я <b>div2</b>
</div>
<div id="div3">
Я <b>div3</b>
</div>
</div>
<script>
$(document).ready(function() {
var drag="#drag";
for(i=1; i<=3;i++){
var a=String(i);
var b="#drag"+a;
var c="#div"+a;
console.log(b+','+c);
$(b).draggable(700);
   $(c).droppable({accept:b,hoverClass:"drags"},{drop:function(){
   $(this).addClass("ui-state-highlight");
     $(this).html("<b>"+'HELLO');
$(b).html('Hello!').hide( 2000);
   }})}});
</script>