How to use draggable and resizable after drag & drop?

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="style/result.css?v=1.3" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<%@ page import = "java.io.*" %> 

<style>

html,body{
    width:100%;
    min-width:200px;
    height:100%;
}

div {
    width: 100%;
    height: 100%;
    border: 1px solid #000;
}


ul,li{
    list-style:none;
    margin:0;
    padding:0;
}

img {
font-size:0;
line-height:0;
}
img.menu {
font-size:0;
line-height:0;
width:90px;
height:90px; 
cursor:pointer;
}
.right_div{
    width: 90px;
    height: auto;
    float:right;
}
.center_div{
    width: 500px;
    height: 100%;
    float:right;
    right:90px;
}
.right_top{
    height: 90px;
    
}
.center_top{
    height: 90px;
    
}
.middle{
    top: 90px;
    height: auto;
    
}

.center_number,.center_alphabet,.center_korean {
    width: 500px;
    height: 100%;
    float:right;
    box-sizing: border-box;
    background: #ffffff;
}

#dropHere{
    width: Calc(100% - 500px - 90px);
    height: 100%;
    left:10px;
    background-color: skyblue;
    border: dotted 1px black;}
    
    
    


.default_top {
    width: Calc(100% - 500px - 90px);
    height: 90px;
    left:10px;
    box-sizing: border-box;
    background: #ffffff;
}
</style>


<script type="text/javaScript" >
$(function(){
    //Make every clone image unique.  
    var counts = [0];
    var resizeOpts = { 
    handles: "all" ,autoHide:true};    
    $(".dragImg").draggable({
        helper: "clone",
        //Create counter
        start: function() { counts[0]++; }
    });  
    $("#dropHere").droppable({
        drop: function(e, ui){
            if(ui.draggable.hasClass("dragImg")) {
                $(this).append($(ui.helper).clone());
                $("#dropHere .dragImg").addClass("item-"+counts[0]);
                    
                $("#dropHere .item-"+counts[0]).removeClass("dragImg ui-draggable ui-draggable-dragging");

                $(".item-"+counts[0]).dblclick(function() {
                    $(this).remove();
                });     
                $(".item-"+counts[0]).draggable().resizable();   
            }

        }
    });


    var zIndex = 0;
    function make_draggable(elements)
    {   
        elements.draggable({
            containment:'parent',
            start:function(e,ui){ ui.helper.css('z-index',++zIndex); },
            stop:function(e,ui){
            }
        });
    }

        
});
</script>


<html>
<head>
<title>Graphic maker</title>
</head>
<body>
<div class="right_div">
    <div class="right_top">
        <ul>
          <li><img src="image/test.PNG" width="90" height="90"></li>
        </ul>
    </div>
    <div class="middle">
        <ul>
          <li><img class="menu" src="image/app_icon.PNG" title="number"></li>
        </ul>
    </div>
    
</div>


<div class="center_div">
    <div class="center_top">
        <input type="text" style="font-size:15pt; text-align:center; width:494px; height:85px;">    </div>
    <div class="middle">
        <div class="center_number">
            <%
            File path_number=new File("D://image//number");
            File[] fileList_number=path_number.listFiles();
            if(fileList_number.length>0){
                for(int i=0;i<fileList_number.length;i++){
                    String name=fileList_number[i].toString().substring(fileList_number[i].toString().lastIndexOf("\\")+1);
                    String fullname="image/number/"+fileList_number[i].toString().substring(fileList_number[i].toString().lastIndexOf("\\")+1);
                    %>
                    <img src=<%=fullname%> class="dragImg"
                    title=<%=name%>
                    width="90" height="90" >
                    
                    <%
                }
            }
            %>
        </div>
            
    </div>
</div>



<div class="default_top">
<script src="js/test.js" >
</script>
<h1>aaa</h1>
</div>

<div id="dropHere" ></div>
    
    
</body>
</html>

There is a script part at the top, jsp and Java code in the middle, and a div called dropHere is defined at the bottom. In the jsp implementation part, after taking one of several images returning to the loop and dropping it on dropHere, you want to make the dropped image draggable or resizable again.

But only resizing works. In my case, I drag & drop and bring it to the dropHere area and add that class. In this case, how do I add it as a div?

Or is there another way?