使用JQuery实现拖拽功能时事件未触发，求助问题排查

嘿，我一眼就看到问题啦——你混用了jQuery对象和原生DOM的事件绑定方式，这就是事件没触发的核心原因！

$('#dropzone')返回的是jQuery包装后的对象，而ondragover、ondragleave、ondrop是原生DOM元素的属性，直接给jQuery对象赋值这些属性根本不会生效。下面给你两种靠谱的修复方式：

方案一：把jQuery对象转为原生DOM元素 #

通过[0]或者.get(0)拿到jQuery对象对应的原生DOM节点，再绑定事件：

// 转换为原生DOM元素
var dropzone = $('#dropzone')[0];
dropzone.ondragover = function() { 
    console.log("entered"); 
    this.className = 'dropzone dragover'; 
    return false; 
};
dropzone.ondragleave = function() { 
    this.className = 'dropzone'; 
    return false; 
};
dropzone.ondrop = function(e) { 
    e.preventDefault(); 
    this.className = 'dropzone'; 
    return false; 
};

方案二：用jQuery的事件绑定方法（更推荐） #

jQuery有自己的事件绑定体系，用.on()方法更符合它的使用习惯，还能避免类型混淆，顺便用addClass/removeClass替代直接修改className，更安全：

var dropzone = $('#dropzone');
dropzone.on('dragover', function() {
    console.log("entered");
    $(this).addClass('dragover');
    return false;
});
dropzone.on('dragleave', function() {
    $(this).removeClass('dragover');
    return false;
});
dropzone.on('drop', function(e) {
    e.preventDefault();
    $(this).removeClass('dragover');
    return false;
});

额外提醒 #

别忘了确保你的JS代码是在DOM加载完成后执行的！要么把代码放在$(document).ready()里，要么放在页面底部（jQuery脚本的后面），不然可能会因为DOM还没渲染好，$('#dropzone')找不到元素，事件绑定就白做啦：

$(document).ready(function() {
    // 这里放你的拖拽事件绑定代码
});

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