有没有在iframe中启用jquery draggable中的滚动?当您使用鼠标中键滚动时,滚动: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&t_mm=02&t_dd=27&t_hh=12&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;">
答案 0 :(得分: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);