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

Question

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

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

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

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

Answer 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'); 
     })          
    })
    });

解决方案链接：

溶液