jquery - 如果页面有多个垂直滚动条，则拖放时无法向下滚动

Question

Canvas 区域没有向下滚动

嗨，

我无法向下滚动 Canvas 来删除拖动的值。实际上我已经完成了我的代码可拖动，如下所示。但在我的页面中，我有两个垂直滚动条。如何向下滚动我的 Canvas 以使其下降。看我的屏幕截图

$(".dnd-preview-draggable-answer").draggable({

恢复:“无效”，

公差:“指针”，

appendTo:“正文”，

滚动:“真”，

cursorAt: { 顶部: 0, 左侧: 0 },

});

Answer 1

您可以使用传统方式，您的代码将如下所示:

$(".draggable").draggable({
                 revert: "invalid",
                 tolerance: "pointer",
                 appendTo: $(".inner-content-that-will-be-scrolled"),
                 scroll : "true",
                 cursorAt: { top: 0, left: 0 },
                 drag: function( event, ui ) { 
                     var draggableY = parseInt($('.draggable').css('top'));  
                     var scrolled = $('.inner-content-that-will-be-scrolled').innerHeight();
                     if (draggableY + 50 >= y2) { 
                         //Start scrolling
                         $('.page').animate({
                            scrollTop:  scrolled},
                            {duration: 5000,
                            step: function() {
                                var x = parseInt($('.draggable').css('left'));
                                var y = parseInt($('.draggable').css('top'));   
                                //detect stop scrolling
                                if ((y + 20 < y2) || y > y2 + 20 || x > x2 || x < x1) {
                                    //cancel animation
                                    $(this).stop();
                                 }
                               }
                         });
                     }
                 }
             });
         });