为何jQuery UI Droppable的accept函数选项未被触发？

jQuery UI Droppable的accept选项仅针对jQuery UI Draggable组件创建的拖拽元素生效，而你拖拽的是系统文件，属于浏览器原生文件拖拽行为，并非jQuery UI生成的draggable对象，因此你配置的accept函数根本不会被触发，自然也无法拦截文件。

要实现文件拖拽到<input type="file">时的文件校验，需要监听原生的dragover和drop事件，手动阻止默认行为并处理文件判断：

$('input[type="file"]')
  // 阻止dragover默认行为，允许drop
  .on('dragover', function(e) {
    e.preventDefault();
  })
  .on('drop', function(e) {
    e.preventDefault();
    // 获取拖拽的文件列表
    const files = e.originalEvent.dataTransfer.files;
    if (files.length > 0) {
      // 这里编写你的文件校验逻辑
      const isValid = /* 自定义判断，比如检查文件类型、大小等 */ false;
      if (!isValid) {
        console.log('文件不符合要求');
        // 可添加提示用户的逻辑
        return;
      }
      // 如果校验通过，将文件赋值给input元素
      this.files = files;
    }
  });

• 核心注意点：必须在dragover和drop事件中调用e.preventDefault()，否则浏览器会默认打开文件，而非触发input的文件接收逻辑。
• 自定义校验：可以通过files数组中每个文件的type（MIME类型）、size（文件大小）等属性编写判断逻辑，控制是否接受文件。

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