jQuery UI draggable卡片丢弃后无法拖拽及插入位置、滚动问题

1. 拖拽后卡片无法二次拖拽故障修复 #

故障原因 #

页面初始化时仅为加载完成后已存在的.card元素绑定了拖拽事件，后续通过clone()方法生成的新卡片没有继承原节点的事件绑定，因此无法触发拖拽操作。

修复方案 #

可以直接在克隆节点时添加true参数，实现节点事件同时克隆，修改drop回调中的clone逻辑即可：

$("#card-list").droppable({
    accept: ".card",
    drop: function( event, ui ){          
        var dropped = ui.draggable;
        // clone传true表示同时复制元素绑定的所有事件
        var newCard = dropped.clone(true).removeAttr('style');
        $(this).append(newCard);
        dropped.remove();
    }
});

$(".card").draggable({
    revert: true,
    opacity: .5
});

2. 功能优化实现 #

2.1 拖拽卡片默认插入列表顶部 #

将drop回调中的append方法替换为prepend方法即可，prepend会将新元素插入到父容器的最顶部：

// 替换append为prepend
$(this).prepend(newCard);

2.2 插入底部时自动滚动到新卡片位置 #

如果保留插入底部的逻辑，在插入新卡片后添加滚动逻辑即可，完整drop回调如下：

drop: function( event, ui ){          
    var dropped = ui.draggable;
    var newCard = dropped.clone(true).removeAttr('style');
    $(this).append(newCard);
    dropped.remove();
    // 平滑滚动到新卡片位置
    $('html, body').animate({
        scrollTop: newCard.offset().top
    }, 300);
}

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