jQuery Draggable&Droppable问题：阻止自动放置同时实现容器排序

我明白你的痛点：既要在元素拖入时完全自己控制添加逻辑，又要让目标容器里的元素能正常排序，但jQuery UI的sortable和draggable/connectToSortable组合会自动帮你把元素放进去，破坏了自定义需求。

问题核心在于connectToSortable这个配置——它会让sortable容器自动接收拖拽的元素，这和你想通过droppable的drop事件自定义处理的逻辑直接冲突。我们可以通过以下调整来解决：

解决方案代码 #

$("#drag_container li").draggable({ 
    helper: "clone", 
    revert: "invalid" 
});

$("#drop_container")
    .droppable({
        accept: "#drag_container li", // 限定只接受拖拽容器内的元素
        drop: function(event, ui) {
            console.log('drop');
            // 这里执行你的自定义添加逻辑
            $(ui.draggable).clone(true, true).appendTo($(this));
        }
    })
    .sortable({
        items: "li", // 只对容器内的li元素启用排序功能
        helper: "clone",
        // 拦截sortable自动接收外部元素的默认行为
        receive: function(event, ui) {
            // 移除sortable自动添加的元素，确保只有droppable里的自定义克隆生效
            ui.item.remove();
        }
    });

关键调整说明 #

• 移除connectToSortable：取消draggable和sortable的自动关联，从根源上避免sortable自动接收拖拽元素。
• 限定droppable的accept范围：确保只有drag_container里的li元素能触发drop事件，避免无关元素干扰逻辑。
• sortable的items配置：指定只对容器内的li元素生效，保证排序功能只作用于我们自定义添加的元素。
• 拦截sortable的receive事件：即使没有connectToSortable，拖拽外部元素到sortable容器时仍可能触发默认接收行为，这里我们把自动添加的元素移除，确保完全遵循自定义的添加逻辑。

这样调整后，你既能在drop事件里完全控制元素的添加逻辑，又能正常对drop_container内的元素进行排序，完美匹配你的需求。

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