Javascript 如何使用jQuery在indiv中多次拖放图像，以及如何使用indropdiv拖放图像？

我的html中有两个div。一个可以拖动，另一个可以放入。当我拖放图像时，我只能拖动一次特定的图像。 我想做以下事情

我可以一次又一次地拖动图像（克隆）。 如果我删除第一个图像，它应该位于相同的位置。 之后，所有图像应根据可拖放区域的形状（如有可能，添加到角落）自动附加

目前的结果如下：

期望输出：

CSS

身体
{
字体系列：Arial；
字号：10pt；
}
img
{
高度：自动；
宽度：自动；
最大宽度：100%；
保证金：2倍；
}
.拖拉
{
过滤器：α（不透明度=60）；
不透明度：0.6；
}
.放弃
{
位置：静态！重要；
}
#拖#掉#
{
边框：1px实心#ccc；
填充物：5px；
最小高度：100px；
宽度：99%；
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
}
#已拖动。框：第n个子项（2）{
顺序：2；
}
.包装盒{
边缘底部：20px；
}
#拖动。框：第n个子项（1）{
显示器：flex；
对齐项目：居中；
调整内容：灵活启动；
柔性包装：包装；
弯曲方向：立柱；
}
#已拖动。框：第n个子项（2）{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
#下降{
显示器：flex；
对齐项目：居中；
最小高度：350px；
背景：#000；
颜色：#fff；
}

HTML代码

<div id="dragged">
    <div class="box">
        <img alt="" src="https://via.placeholder.com/300/09f/fff.png" />
        <img alt="" src="https://via.placeholder.com/300/09f/fff.png" />
        <img alt="" src="https://via.placeholder.com/300/09f/fff.png" />
    </div>
    <div class="box">
        <img alt="" src="https://via.placeholder.com/300/09f/fff.png" />
        <img alt="" src="https://via.placeholder.com/300/09f/fff.png" />
        <img alt="" src="https://via.placeholder.com/300/09f/fff.png" />        
    </div>
    <div class="box">
        <div class="box_wrap">
            <img alt="" src="https://via.placeholder.com/300/09f/fff.png" />
            <img alt="" src="https://via.placeholder.com/300/09f/fff.png" />    
        </div>
        <div class="box_wrap">
            <img alt="" src="https://via.placeholder.com/300/09f/fff.png" />
            <img alt="" src="https://via.placeholder.com/300/09f/fff.png" />    
        </div>
    </div> 
</div>

<hr />
    <div id="dropped">
</div>

包括Js

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.24/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

Java脚本代码

<script type="text/javascript">
    $(function () {
    $('#dragged img').draggable({
            stack: "#dragged .box img",
            helper: 'clone',
    });
    $('#dropped').droppable({
    accept: "#dragged .box img",
    drop: function(event, ui) {
    var droppable = $(this);
            var draggable = ui.draggable;
            // Move draggable into droppable
            var drag = $('.droppable').has(ui.draggable).length ? draggable : draggable.clone().draggable({
              revert: "invalid",
              stack: "#dragged .box img",
              helper: 'clone'
            });
            drag.appendTo(droppable);
             draggable.css({ float: 'left'});
            }
        });
    });
</script>    

$（函数（）{
$（“#拖动img”）。可拖动({
堆栈：“#拖动.box img”，
助手：“克隆”，
});
$（“#已删除”）。可删除({
接受：“#拖动的.box img”，
drop：函数（事件、用户界面）{
var droppable=$（此）；
var draggable=ui.draggable；
//将可拖动移动到可拖放位置
var drag=$（'.droppable'）.has（ui.draggable）.length？draggable:draggable.clone（）.draggable({
回复：“无效”，
堆栈：“#拖动.box img”，
助手：“克隆”
});
drag.appendTo（可拖放）；
css（{float:'left'}）；
}
});
});

不太清楚为什么要使用各种不同的jQuery UI库。我建议您只切换到一个特定的库

$（函数（）{
函数makeDrag（obj）{
可拖动的({
回复：“无效”，
堆栈：“#拖动.box img”，
助手：“克隆”
});
返回obj；
}
$（“#拖动img”）。可拖动({
堆栈：“#拖动.box img”，
助手：“克隆”，
});
$（“#已删除”）。可删除({
接受：“img”，
drop：函数（事件、用户界面）{
var droppable=$（此）；
var draggable=ui.draggable；
var newImg=$（“
.box{
宽度：100%；
高度：310px；
}
.box img{
浮动：对；
}
人力资源{
明确：两者皆有；
}
#下降{
宽度：100%；
高度：310px；
背景色：#000；
}



<script type="text/javascript">
    $(function () {
    $('#dragged img').draggable({
            stack: "#dragged .box img",
            helper: 'clone',
    });
    $('#dropped').droppable({
    accept: "#dragged .box img",
    drop: function(event, ui) {
    var droppable = $(this);
            var draggable = ui.draggable;
            // Move draggable into droppable
            var drag = $('.droppable').has(ui.draggable).length ? draggable : draggable.clone().draggable({
              revert: "invalid",
              stack: "#dragged .box img",
              helper: 'clone'
            });
            drag.appendTo(droppable);
             draggable.css({ float: 'left'});
            }
        });
    });
</script>