在 iframe 内启用可拖动的 Jquery 滚动

Posted 2023-05-09

【中文标题】在 iframe 内启用可拖动的 Jquery 滚动

【英文标题】：Enable scrolling in of Jquery draggable inside an iframe

【发布时间】：2017-07-06 08:51:11

【问题描述】：

无论如何，是否可以在 iframe 内启用可拖动的 jquery 滚动？ scroll: true 不起作用或 iframeFix 在您使用鼠标中键滚动时起作用，但如果您使用左键单击一直向下拖动它不起作用，您能帮帮我吗？

$(".draggables .item-container .item").draggable(
    revert: "invalid", 
    containment: "#selection",
    helper: "clone",
    iframeFix: true,
    scroll: true,
    scrollSensitivity: 100,
    scrollSpeed: 100,
    cursor: "move",
);

$(".droppables .item-container .item").droppable(
    accept: ".draggables .item-container .item",
    classes: 
        "ui-droppable-active": "ui-state-active",
        "ui-droppable-hover": "ui-state-hover"
    ,
    drop: function( event, ui ) 
        insertItem(this, ui.draggable );
    
);

<div style="height: 178px; border: 1px solid #000;"></div> <iframe src="index.html?formForward=LOAD&amp;t_mm=02&amp;t_dd=27&amp;t_hh=12&amp;t_min=01" onload="resizeIframe(this);parent.scroll(0,0);"  style="border-width: 0px; height: 2000px;"  scrolling="auto">
</iframe><div style="height: 1000px; border: 1px solid #000;">

【参考方案1】：

我是这样解决的。我希望这可以帮助你。

(function ($) 

    $(function ()  


        $.ui.plugin.add( "draggable", "scroll_fix_iframe", 
            start: function( event, ui, i ) 


                // Solution
                i.scrollParentNotHidden[ 0 ] = document.documentElement;
                i.overflowOffset = $(ui.helper).offset();

                /*
                if ( !i.scrollParentNotHidden ) 
                    i.scrollParentNotHidden = i.helper.scrollParent( false );
                

                if ( i.scrollParentNotHidden[ 0 ] !== i.document[ 0 ] &&
                        i.scrollParentNotHidden[ 0 ].tagName !== "HTML" ) 
                    i.overflowOffset = i.scrollParentNotHidden.offset();
                
                */

            ,
            drag: function( event, ui, i  ) 

                var o = i.options,
                    scrolled = false,
                    scrollParent = i.scrollParentNotHidden[ 0 ],
                    document = i.document[ 0 ];

                if ( scrollParent !== document && scrollParent.tagName !== "HTML" ) 
                    if ( !o.axis || o.axis !== "x" ) 
                        if ( ( i.overflowOffset.top + scrollParent.offsetHeight ) - event.pageY <
                                o.scrollSensitivity ) 
                            scrollParent.scrollTop = scrolled = scrollParent.scrollTop + o.scrollSpeed;
                         else if ( event.pageY - i.overflowOffset.top < o.scrollSensitivity ) 
                            scrollParent.scrollTop = scrolled = scrollParent.scrollTop - o.scrollSpeed;
                        
                    

                    if ( !o.axis || o.axis !== "y" ) 
                        if ( ( i.overflowOffset.left + scrollParent.offsetWidth ) - event.pageX <
                                o.scrollSensitivity ) 
                            scrollParent.scrollLeft = scrolled = scrollParent.scrollLeft + o.scrollSpeed;
                         else if ( event.pageX - i.overflowOffset.left < o.scrollSensitivity ) 
                            scrollParent.scrollLeft = scrolled = scrollParent.scrollLeft - o.scrollSpeed;
                        
                    

                 else 

                    if ( !o.axis || o.axis !== "x" ) 
                        if ( event.pageY - $( document ).scrollTop() < o.scrollSensitivity ) 
                            scrolled = $( document ).scrollTop( $( document ).scrollTop() - o.scrollSpeed );
                         else if ( $( window ).height() - ( event.pageY - $( document ).scrollTop() ) <
                                o.scrollSensitivity ) 
                            scrolled = $( document ).scrollTop( $( document ).scrollTop() + o.scrollSpeed );
                        
                    

                    if ( !o.axis || o.axis !== "y" ) 
                        if ( event.pageX - $( document ).scrollLeft() < o.scrollSensitivity ) 
                            scrolled = $( document ).scrollLeft(
                                $( document ).scrollLeft() - o.scrollSpeed
                            );
                         else if ( $( window ).width() - ( event.pageX - $( document ).scrollLeft() ) <
                                o.scrollSensitivity ) 
                            scrolled = $( document ).scrollLeft(
                                $( document ).scrollLeft() + o.scrollSpeed
                            );
                        
                    

                

                if ( scrolled !== false && $.ui.ddmanager && !o.dropBehaviour ) 
                    $.ui.ddmanager.prepareOffsets( i, event );
                

            
         );        


        $("#drag").draggable(

            scroll_fix_iframe:true,

            start: function(),
            stop: function() ,
            drag: function(event,ui)

        );

    );

)(jQuery);