Creating a draggable object in a iFrame from outside

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.

if both the files are loaded from the same origin, you can add a method in iframe source which can be called by the parent page and execute the required code — dhaval, Jun 21 '12 at 13:41
I can't edit the content because it's generated by another app. — TecHunter, Jun 21 '12 at 13:59
Is the app in another domain? because you will be falling into http://en.wikipedia.org/wiki/Same_origin_policy as described here: http://stackoverflow.com/questions/364952/jquery-javascript-accessing-contents-of-an-iframe — KoU_warch, Jun 21 '12 at 17:15
have you tried this option - `$(document.getElementById("frame-id").contentWindow.document.getElementById("element-id")).draggable({iframeFix: true});` — dhaval, Jun 21 '12 at 18:16
or `$("frame-id").contents().find("element-id").draggable({iframeFix: true});` — dhaval, Jun 21 '12 at 18:23
@dhaval Same problem : http://jsfiddle.net/techunter/4pnxh/15/ — TecHunter, Jun 22 '12 at 07:06
have you tried this in your local files, i could not make it work in jsfiddle but it works in local - https://gist.github.com/2970945 — dhaval, Jun 22 '12 at 07:16
@dhaval http://jsfiddle.net/techunter/4pnxh/23/ it's working but only with draggable. It attach the event on the right window but get the wrong mouse position. I need a solution for the slider though but if it's the same result (wrong mouse pos) it's still half way there — TecHunter, Jun 22 '12 at 08:34

KoU_warch · Accepted Answer · 2012-07-03T13:18:01.987

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

Creating a draggable object in a iFrame from outside

1 Answers1

Linked