如何获取被拖拽元素所属的draggable类名？

AI 小北

2026-5-14

解决拖拽元素类名判断的问题

嘿，这事儿好办！要在drop事件里获取并判断被拖拽元素的类名，咱们可以利用jQuery的hasClass()方法（最靠谱，因为元素可能同时有多个类），或者直接获取元素的class属性值。下面给你修改后的代码，加了类名判断的核心逻辑：

$(function() {
    $('.draggable').draggable({ 
        revert: "invalid", 
        stack: "0", 
        helper: 'clone' 
    }); 
    $('.edit_draggable').draggable({ 
        revert: "true", 
        stack: "0" 
    }); 
    $('.droppable').droppable({ 
        accept: ".edit_draggable,.draggable", 
        drop: function(event, ui) { 
            $(this).find("input").remove(); 
            var droppable = $(this); 
            var draggable = ui.draggable;
            
            // 核心：判断并获取被拖拽元素的类名
            let draggedClassName;
            if (draggable.hasClass('draggable')) {
                draggedClassName = 'draggable';
                console.log('当前拖拽的是.draggable类元素');
            } else if (draggable.hasClass('edit_draggable')) {
                draggedClassName = 'edit_draggable';
                console.log('当前拖拽的是.edit_draggable类元素');
            }
            
            // 你原有的业务逻辑继续执行
            draggable.clone().appendTo(droppable); 
            $(this).find("input").attr("name", "headercols[]"); 
        } 
    }); 
});

小细节说明：

ui.draggable就是当前被拖拽元素的jQuery对象，直接用它调用类相关方法即可。
用hasClass()判断比直接取class属性更稳妥——如果元素有多个类（比如<div class="draggable custom-class"></div>），直接取class会拿到所有类名，而hasClass()能精准判断是否包含目标类。
如果你需要获取元素的所有类名，可以用draggable.attr('class')或者draggable[0].className，不过针对你的需求，用hasClass()做定向判断就足够啦。