Javascript 如何使用jquery在图像上拖动元素副本？

我有一个简单的div元素，我想把它拖到图像上，但是当我把这个div元素拖到图像上时，它就不会显示在那里了。 1.我想将元素的副本拖到图像上

我尝试了不同的建议，但没有得到我想要的结果。 1.我已使用帮助程序：“克隆”
-->当我使用Clone with

draggable

时，它正在复制，但它仍然没有在图像标签上显示元素

这里我提到了我的简单代码，请检查一下。并建议我实现我的目标

@{
    ViewBag.Title = "Draggable";
    Layout = null;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div>
    <div class="ui-visual-focus draggable" style="width:100px;">
        Textbox
    </div>
    <br />
    <div class="droppable">
        <img src="~/Documents/employeeFormImage.png" />
    </div>
</div>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>

    $(document).ready(function () {

    });

    $(function () {
        $('.draggable').draggable({
            revert: "invalid",
            stack: ".draggable",
            helper: 'clone'
        });
        $('.droppable').droppable({
            accept: ".draggable",
            drop: function (event, ui) {
                var droppable = $(this);
                var draggable = ui.draggable;
                // Move draggable into droppable
                draggable.clone().appendTo(droppable);
            }
        });
    });
</script>

@{
ViewBag.Title=“可拖动”；
布局=空；
}
文本框


$（文档）.ready（函数（）{
});
$（函数（）{
$（'.draggable'）.draggable({
回复：“无效”，
堆栈：“.draggable”，
助手：“克隆”
});
$（'.droppable'）.droppable({
接受：“.draggable”，
drop：函数（事件、用户界面）{
var droppable=$（此）；
var draggable=ui.draggable；
//将可拖动移动到可拖放位置
draggable.clone（）.appendTo（可拖放）；
}
});
});

如果我没有弄错你的问题，那么你可以通过CSS中的小技巧来实现这一点，你可以拥有

谢谢@Ma'moun othman的指导。这有助于我在做出一些改变后实现目标。我得到了我想要的结果。谢谢。不过我还是遇到了一些问题，需要调整它的大小。请您指导一下，在图像上添加元素后，如何使其可调整大小？@HarryR我更新了我的答案请也更新我的答案：）