Question

My problem : I need to create draggable widgets (here it’s a jslider for example) from outside the iframe. Both Container and iframe content are from the same origin.
The problem is that jQuery is attaching the mousemove event on the wrong document object.

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

Try moving the sliders, it can only move when the mouse trigger the events outside the iframe.
Please help, I’m stuck here

EDIT:
JQuery listens to the click on the slider handle and on click event it create a new listener on mousemove but within the window, not the frame. I’m considering changing the jquery lib and adding a context (which by default is window.document) but it’s time expensive.

Answer 1

A Work arround for this is:

• As the slider is actually not working by default just don’t call anything at start

• Create a JavaScript function that will set the value of the slider while the mouse is being held down inside the slider.

• You need to make the ui-slide-handle return a reference to its parent while is being helddown

This solution works in all major browsers:

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

The solution link:

Solution