nested droppable in iframe

maxazan / jquery-ui-droppable-iframe

Use your droppable zones inside iframe

MIT License

17 stars 10 forks source link

//修复在iframe中,错误的重置了元素的 offset 的bug var intersect = $.ui.intersect; $.widget('ui.droppable', $.ui.droppable, { _drop: function( event, custom ) { var draggable = custom || $.ui.ddmanager.current, childrenIntersection = false; // Bail if draggable and droppable are same element if ( !draggable || ( draggable.currentItem || draggable.element )[ 0 ] === this.element[ 0 ] ) { return false; } this.element .find( ":data(ui-droppable)" ) .not( ".ui-draggable-dragging" ) .each( function() { var inst = $( this ).droppable( "instance" ); ///////// !!! 重要修改, 这里如果已经赋值了,就不用再赋值, 解决 iframe 内部droppable元素定位错误的bug !!!! if( ! inst.offset ){ inst.offset = inst.element.offset(); } /////////////////////////////// if ( inst.options.greedy && !inst.options.disabled && inst.options.scope === draggable.options.scope && inst.accept.call( inst.element[ 0 ], ( draggable.currentItem || draggable.element ) ) && intersect( draggable, inst, inst.options.tolerance, event ) ) { childrenIntersection = true; return false; } } ); if ( childrenIntersection ) { return false; } if ( this.accept.call( this.element[ 0 ], ( draggable.currentItem || draggable.element ) ) ) { this._removeActiveClass(); this._removeHoverClass(); this._trigger( "drop", event, this.ui( draggable ) ); return this.element; } return false; } } );

this solution works great until I have nested droppables in iframe.

I've to replace ui.droppable._drop method, to prevent resetting droppables' offset attribute, see below:

//修复在iframe中,错误的重置了元素的 offset 的bug
var intersect = $.ui.intersect;
$.widget('ui.droppable', $.ui.droppable, {

    _drop: function( event, custom ) {

        var draggable = custom || $.ui.ddmanager.current,
            childrenIntersection = false;

        // Bail if draggable and droppable are same element
        if ( !draggable || ( draggable.currentItem ||
            draggable.element )[ 0 ] === this.element[ 0 ] ) {
            return false;
        }

        this.element
            .find( ":data(ui-droppable)" )
            .not( ".ui-draggable-dragging" )
            .each( function() {
                var inst = $( this ).droppable( "instance" );
                ///////// !!! 重要修改, 这里如果已经赋值了,就不用再赋值, 解决 iframe 内部droppable元素定位错误的bug !!!!
                if( ! inst.offset ){
                    inst.offset = inst.element.offset();
                }
                ///////////////////////////////
                if (
                    inst.options.greedy &&
                    !inst.options.disabled &&
                    inst.options.scope === draggable.options.scope &&
                    inst.accept.call(
                        inst.element[ 0 ], ( draggable.currentItem || draggable.element )
                    ) &&
                    intersect(
                        draggable,
                        inst,
                        inst.options.tolerance, event
                    )
                ) {
                    childrenIntersection = true;
                    return false; }
            } );
        if ( childrenIntersection ) {
            return false;
        }

        if ( this.accept.call( this.element[ 0 ],
                ( draggable.currentItem || draggable.element ) ) ) {
            this._removeActiveClass();
            this._removeHoverClass();

            this._trigger( "drop", event, this.ui( draggable ) );
            return this.element;
        }

        return false;

    }

} );

Thank you so much. You saved my life

maxazan / jquery-ui-droppable-iframe

nested droppable in iframe #1