iframe 内的 jQueryUI 可拖动元素 - 滚动 iframe 的不良行为答案

【问题标题】：jQueryUI draggable element inside iframe - bad behavior with scrolled iframesiframe 内的 jQueryUI 可拖动元素 - 滚动 iframe 的不良行为
【发布时间】：2014-01-09 09:47:21
【问题描述】：

我在（滚动的）iframe 中有一个可拖动的 div 时遇到了麻烦。请看看这个小提琴：http://jsfiddle.net/CqE43/

这是使用的代码：

$('#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');
}
});

奇怪的行为是：如果 iframe 没有滚动，一切都会按预期工作，但如果稍微滚动 iframe，拖动时会出现偏移。

【问题讨论】：

还有一件奇怪的事情：一旦完成拖动，我就不会进入停止方法
还有一个：滚动条向右移动后无法拖动..（可能与上述有关）
jep，对我来说也一样......但这可能与 jsfiddle 有关。但我很肯定我所说的其他行为也发生在其他用例中。

标签： javascript jquery iframe

【解决方案1】：

好的，我有一个（不是唯一的）解决方案。

这里是小提琴：http://jsfiddle.net/CqE43/17/

这是源代码：

$(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;
    }
});

是的，它并不漂亮，但它确实工作得很好！

【讨论】：