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

Question

是否有办法在 iframe 内启用 jquerydraggable 中的滚动？当您使用鼠标中键滚动时， 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);" height="2000" style="border-width: 0px; height: 2000px;" width="100%" scrolling="auto">
</iframe><div style="height: 1000px; border: 1px solid #000;">

Answer 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);