Javascript jquery在iframe中可拖动赢得'；点击

我已经在iframe中从其父对象创建了一个DragTable，我想在单击该DragTable时附加一个事件

DragTable可以自己工作，所有的点击功能都可以自己工作，但是一旦你将两者混合在一起，左键点击事件就会停止工作。如果我删除iframe并将draggable和click绑定放在一个单独的页面中，它就可以正常工作

parent.html

}))

iframe.html

可拖动

JSIDLE代码：

JSFIDLE演示：

编辑：

---

在进一步研究之后，似乎是iframeFix:true选项干扰了click函数，我猜这是因为它覆盖了iframe？有什么可以做的吗？

您的代码是正确的，但是，您正在从不同的URL加载iframe。

---

如果父域和iframe url域不同，则javascript不允许您访问iframe元素。

我认为问题在于jquery ui在mousedown事件发生后立即快速创建iframeFix掩码，但延迟仅用于mousestart控制。因此，这可以通过添加函数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");
    });
}

最后，在_mouseup函数中，清除mouseup句柄，清除超时

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

---

我不认为这是一个跨域的问题，如果你看一下我发布的JSFIDLE演示，它们都来自同一个域，但仍然不起作用——如果你使用/show/light（在iframe和parent中）运行它，那么两者的域都是jsfiddle.net。试着在我上面的评论中拖动链接中的iframe下拉框，它对我很有用。

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

_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");
    });
}

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

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