使用jQuery dragstart事件拖拽元素时滚轮失效，无需jQuery UI如何解决

HTML5 原生拖拽的浏览器默认行为会在拖拽激活期间阻塞滚轮事件触发，和jQuery本身无关，这是你当前代码滚轮失效的核心原因。

不需要引入任何第三方插件，只需要在原有代码基础上补充拖拽状态判断和手动滚动逻辑即可：

修改后的JS代码如下： #

(function($) {
  // 标记拖拽状态
  let isDragging = false;
  // 你的目标滚动容器
  const $targetScroll = $('#content');

  $("ul li", document).on('dragstart', function(event) {
    console.log("dragstart")
    isDragging = true;
  });

  // 全局监听滚轮事件，拖拽状态下手动控制滚动
  $(document).on('wheel', function(e) {
    if (!isDragging) return;
    // 读取原生滚轮偏移量，正数向下滚动、负数向上滚动
    const delta = e.originalEvent.deltaY;
    $targetScroll.scrollTop($targetScroll.scrollTop() + delta);
    e.preventDefault();
  });

  $("#content", document).on('dragenter', function(event) {
    console.log("dragenter ");
  })

  // 拖拽结束后重置状态
  $(document).on('dragend drop dragleave', function() {
    isDragging = false;
  })
})(jQuery);

原有CSS和HTML代码不需要做任何修改。

• 用变量标记拖拽状态，拖拽开始时激活标记，拖拽结束/取消/元素放下时重置标记
• 全局监听滚轮事件，只有在拖拽状态下，读取滚轮偏移量手动修改滚动容器的scrollTop属性，实现滚动效果
• 如果你的页面存在多个可滚动区域，只需要在dragenter事件中记录当前鼠标进入的可滚动容器，滚轮事件中操作对应容器即可适配多区域滚动

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