jquery draggable in iframe won't click

Question

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?

Answer 1

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;
},

Answer 2

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.