[英]jQueryUI draggable element inside iframe - bad behavior with scrolled iframes
I am experiencing troubles while having a draggable div inside an (scrolled) iframe. 我在(滚动的)iframe中使用可拖动的div时遇到了麻烦。 Please have look at this fiddle: http://jsfiddle.net/CqE43/ 请看看这个小提琴: http : //jsfiddle.net/CqE43/
This is the used code: 这是使用的代码:
$('#test').contents().find('body').append('<div id="wrapper" style="width: 300px; height: 900px; background: #ff0000; display: block; margin-top:50px;"><div id="drag" style="width: 100px; height: 100px; background-color: blue;" ></div></div>');
$('#test').contents().find('#drag').draggable({
iframeFix: true,
start: function( event, ui ) {
console.log('start');
},
drag: function( event, ui ) {
console.log('drag');
},
stop: function( event, ui ) {
console.log('stop');
}
});
The strange behavior is: if the iframe is not scrolled everything works like expected but if one scrolls the iframe a bit, an offset appears while dragging. 奇怪的行为是:如果未滚动iframe,则一切正常,但如果稍微滚动iframe,则在拖动时会出现偏移。
Ok, I've got a (not the but a) solution. 好的,我有一个(不是,而是一个)解决方案。
Here is the fiddle: http://jsfiddle.net/CqE43/17/ 这是小提琴: http : //jsfiddle.net/CqE43/17/
and this is the source code: 这是源代码:
$(function () {
$('#test').contents().find('body').append('<div id="wrapper" style="width: 300px; height: 900px; background: #ff0000; display: block; margin-top:50px;"><div id="drag" style="width: 100px; height: 100px; background-color: blue;" ></div></div>');
var myDraggable = $('#test').contents().find('#drag').draggable({iframeFix: true}).data('ui-draggable');
myDraggable._mouseDrag = function(event, noPropagation) {
if ( this.offsetParentCssPosition === "fixed" ) {
this.offset.parent = this._getParentOffset();
}
//Compute the helpers position
this.position = this._generatePosition(event);
this.positionAbs = this._convertPositionTo("absolute");
//Call plugins and callbacks and use the resulting position if something is returned
if (!noPropagation) {
var ui = this._uiHash();
if(this._trigger("drag", event, ui) === false) {
this._mouseUp({});
return false;
}
this.position = ui.position;
}
if(!this.options.axis || this.options.axis !== "y") {
this.helper[0].style.left = this.position.left+"px";
}
if(!this.options.axis || this.options.axis !== "x") {
this.helper[0].style.top = $('#test').contents().find('body').scrollTop()+this.position.top+"px";
}
if($.ui.ddmanager) {
$.ui.ddmanager.drag(this, event);
}
return false;
}
});
Yes, it is not beautiful ubt it does work quite well! 是的,它不是很漂亮,但效果很好!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.