jQuery draggable克隆拖入dropzone后移动重复克隆的解决方法

你的问题出在：克隆出来的元素依然带着.draggable类，而你给所有.draggable元素都绑定了draggable({helper:"clone"})，同时dropzone接受所有.draggable元素，所以移动克隆后的元素时，会再次触发drop事件生成新的克隆。

下面是两种可行的解决方法：

方案一：克隆后移除原始类，标记已拖入元素 #

直接给克隆后的元素去掉.draggable类，避免它被当作新的可拖入源，同时添加新类用于绑定普通拖拽行为：

.draggable{
    width: 100px;
    height: 100px;
    background-color: lightblue;
}
#dropZone{
    width:300px;
    height:300px;
    background:yellow;
    position:relative;
}
/* 可选：给拖入的元素加个样式区分 */
.dropped-element{
    cursor: move;
}

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

<script>
$(document).ready(function(){
    // 仅给外部的原始draggable元素绑定带克隆的拖拽
    $( ".draggable" ).draggable({
        helper:"clone"
    });

    $( "#dropZone" ).droppable({
        accept: '.draggable', // 只接受外部的原始元素
        drop: function(event, ui){
            var obj = ui.draggable.clone()
                          .removeClass('draggable') // 移除原始类，避免触发重复克隆
                          .addClass('dropped-element'); // 标记为已拖入的元素
            $(this).append(obj);
            // 给拖入的元素绑定普通拖拽（不带克隆）
            obj.draggable();
        }
    });
});
</script>

<div id="dropZone" ></div>
<div class="draggable ui-widget-content">Drag me</div>

方案二：在drop事件里判断元素来源 #

如果需要保留.draggable类，可以通过判断元素的父容器，只允许外部的元素被克隆拖入：

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

<script>
$(document).ready(function(){
    $( ".draggable" ).draggable({
        helper:"clone"
    });

    $( "#dropZone" ).droppable({
        accept: '.draggable',
        drop: function(event, ui){
            // 仅当拖拽的元素来自dropzone外部时，才生成克隆
            if(!ui.draggable.parent().is('#dropZone')){
                var obj = ui.draggable.clone();
                $(this).append(obj);
                obj.draggable();
            }
        }
    });
});
</script>

<div id="dropZone" ></div>
<div class="draggable ui-widget-content">Drag me</div>

两种方案都能解决问题，方案一逻辑更清晰，彻底避免了误触发的可能；方案二则保留了原始类，适合需要复用.draggable样式的场景。

内容的提问来源于stack exchange，提问作者Hoover_Sweden