1

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

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

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

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

4

1 回答 1

2

解决此问题的方法是：

  • 由于默认情况下滑块实际上不起作用，所以在开始时不要调用任何东西

  • 创建一个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'); 
     })          
    })
    });

解决方案链接：

解决方案

于 2012-06-22T19:57:59.880 回答