从外部在 iFrame 中创建可拖动对象答案

【问题标题】：Creating a draggable object in a iFrame from outside从外部在 iFrame 中创建可拖动对象
【发布时间】：2012-05-30 13:16:38
【问题描述】：

我的问题：我需要从 iframe 外部创建可拖动的小部件（例如这里是 jslider）。 Container 和 iframe 内容都来自同一来源。问题是 jQuery 在错误的文档对象上附加了 mousemove 事件。

http://jsfiddle.net/techunter/4pnxh

尝试移动滑块，它只能在鼠标触发 iframe 之外的事件时移动。请帮忙，我卡在这里了

编辑： JQuery 侦听滑块句柄上的单击，并在单击事件时在 mousemove 上创建一个新的侦听器，但在窗口内，而不是在框架内。我正在考虑更改 jquery 库并添加一个上下文（默认情况下是 window.document），但它的时间很昂贵。

【问题讨论】：

如果两个文件都是从同一个源加载的，你可以在iframe源中添加一个方法，可以被父页面调用并执行所需的代码
我无法编辑内容，因为它是由另一个应用程序生成的。
该应用是否在另一个域中？因为您将陷入en.wikipedia.org/wiki/Same_origin_policy，如下所述：stackoverflow.com/questions/364952/…
你试过这个选项吗 - $(document.getElementById("frame-id").contentWindow.document.getElementById("element-id")).draggable({iframeFix: true});
或$("frame-id").contents().find("element-id").draggable({iframeFix: true});

标签： jquery events iframe jquery-ui-draggable jquery-slider

【解决方案1】：

解决这个问题的方法是：

由于默认情况下滑块实际上不工作，所以不要在开始时调用任何东西
创建一个JavaScript 函数，该函数将在鼠标在滑块内按住时设置滑块的值。
您需要让 ui-slide-handle 在按住时返回对其父级的引用

此解决方案适用于所有主流浏览器：

$(function(){

  $('iframe').ready(function(){
     var $document = $('#result iframe',$('#main').contents()).contents();
     $('.slider',$document).slider({
          //Prevent the slider from doing anything from the start
          start:function(event,ui){return false;}
     });


     $(document).mouseup(function(){
         $('.slider,.ui-slider-handle',$document).unbind('mousemove') 
     })

     //While the ui-slider-handle is being held down reference it parent.
     $('.ui-slider-handle',$document).mousedown(function(e){
        e.preventDefault();
        return $(this).parent().mousedown()})

     //This will prevent the slider from moving if the mouse is taken out of the
     //slider area before the mouse down has been released.                
     $('.slider',$document).hover(function(){

        $('.slider',$document).mousedown(function(){
           $(this).bind('mousemove',function(e){

                //calculate the correct position of the slider set the value
                $(this).slider('value',e.pageX*100/$(this).width())
           });             
        }).mouseup(function(){
             $(this).unbind('mousemove');
        })},function(){
        $( '.slider',$document ).unbind('mousemove'); 
     })          
    })
    });

解决方案链接：

Solution

【讨论】：