简体   繁体   English

iframe中的jQueryUI可拖动元素-滚动iframe的不良行为

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM