Создание объекта с перетаскиванием в iFrame извне

Question

Моя проблема: мне нужно создать перетаскиваемые виджеты (например, это jslider) из-за пределов iframe. Содержимое Container и iframe относится к одному и тому же происхождению. Проблема в том, что jQuery присоединяет событие mousemove к неправильному объекту документа.

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

Попробуйте ползунков, он может двигаться только при наведении курсора мыши вызвать события вне фрейма. Пожалуйста, помогите, я застрял здесь

EDIT: JQuery слушает мыши на ползунок ручке и на событии нажатия его создание нового слушателя на MouseMove, но в окне, а не кадр. Я рассматриваю возможность изменения jquery lib и добавления контекста (который по умолчанию является window.document), но это дорогостоящее время.

Answer 1

Работа Arround для этого:

• Поскольку слайдер фактически не работает по умолчанию просто ничего не называйте при запуске

• Создать JavaScript функцию, которая будет устанавливать значение ползунок, когда мышь удерживается внутри ползунка.

• Вам нужно сделать пользовательский интерфейс слайд-ручку возвращает ссылку на родительское время в настоящее время helddown

Это решение работает во всех основных браузерах:

$(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