CODEWITHSUNDEEP
javascriptjqueryjquery-uiiframejquery-ui-draggable
kiwijus
kiwijus

Reputation: 1237

jquery draggable in iframe won't click

I have created a draggable within an iframe from it's parent and I would like to attach an event for when the draggable is clicked.

The draggable works by itself and all the click functions work by themselves, however as soon as you mix the two together the left click events stop working. If I remove the iframe and put the draggable and click bindings in a seperate page it works fine.

parent.html

<iframe id="siteframe" src="http://jsfiddle.net/kyT6N/show/light/">

parent.js

$('#siteframe').load(function () {

    $('#siteframe').contents().find('.draggable').draggable({ delay:200, iframeFix: true});

    $('#siteframe').contents().find('.draggable').bind('mouseup',function() {
        alert('mouse up');
    });  

    $('#siteframe').contents().find('.draggable').click(function() {
        alert('click');
    });
    $('#siteframe').contents().find('.draggable').on('click', function() {
        alert('click');
    });

});

iframe.html

<div class="draggable">draggable</div>

JSFiddle code: http://jsfiddle.net/A5T3Q/

JSFiddle demo: http://jsfiddle.net/A5T3Q/show/light/

EDIT:

After investigating a bit further it seems that it's the iframeFix: true option that messes with the click function, I'm guessing this is because it overlays the iframe? is there anything that can be done about this?

Upvotes: 1

Views: 720

Answers (2)

garrygu
garrygu

Reputation: 46

I think it is the problem that jquery ui create iframeFix mask too fast immediately after the mousedown event occured , but the delay is only use for mousestart control . So this can be optimized by add a function _iframeFix . 

_iframeFix: function(event){
    //patch for iframe
    var o=this.options;
    if(o.iframeFix === true){
        $("div.ui-draggable-iframeFix").each(function() {
            this.parentNode.removeChild(this);
        });
    }

    $(o.iframeFix === true ? "iframe" : o.iframeFix).each(function() {
        $('<div class="ui-draggable-iframeFix" style="background: #fff;"></div>')
        .css({
            width: this.offsetWidth+"px", height: this.offsetHeight+"px",
            position: "absolute", opacity: "0.001", zIndex: 1000
        })
        .css($(this).offset())
        .appendTo("body");
    });
}

remove the iframe mask code in the _mouseCapture function ,and to create iframe mask after delay . Also , you should add a mouseup event handle for the drag element in the iframe to endup the timeout control

    if(o.iframeFix&&o.delay){
       that.element
            .bind('mouseup.'+this.widgetName, this._mouseUpDelegate);
    }

And final in the _mouseup function, clear the mouseup handle ,clear the timeout

_mouseUp: function(event) {
    $(document)
        .unbind('mousemove.'+this.widgetName, this._mouseMoveDelegate)
        .unbind('mouseup.'+this.widgetName, this._mouseUpDelegate);

    var o=this.options;
    if(o.iframeFix&&o.delay){
       mouseHandled = false;
       this.element
            .unbind('mouseup.'+this.widgetName, this._mouseUpDelegate);
    }
    if(this._mouseDelayTimer) clearTimeout(this._mouseDelayTimer);

    if (this._mouseStarted) {
        this._mouseStarted = false;

        if (event.target === this._mouseDownEvent.target) {
            $.data(event.target, this.widgetName + '.preventClickEvent', true);
        }

        this._mouseStop(event);
    }

    return false;
},

Upvotes: 1

siraj pathan
siraj pathan

Reputation: 1495

Your code is right, but, you are loading iframe from different URL. If parent domain and iframe url domain is different then javascript don't allows you to access iframe element.

Upvotes: 0

Related Questions