Question

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

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

编辑： JQuery监听滑块手柄上的单击，并在单击事件上它在mousemove上创建一个新的侦听器，但在窗口内，而不是框架内。我正在考虑更改jquery lib并添加一个上下文（默认情况下是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'); 
     })          
    })
    });

解决方案链接：

Solution

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

1 个答案: