Question

我在（滚动）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，拖动时会出现偏移。

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

是的，它不是很漂亮，它确实运作得很好！

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

1 个答案: