从外部的iFrame创建拖动对象(Creating a draggable object in a

我的问题：我需要从IFRAME之外创建可拖动的小部件（这里是例如JSlider的）。这两个集装箱和iframe内容来自同一产地。问题是，jQuery是安装了错误的文档对象上的鼠标移动事件。

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

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

编辑：JQuery的监听在滑块手柄的点击和点击事件它放在鼠标移动，但是窗口，而不是框架内创建一个新的监听器。我正在考虑换jQuery的lib和增加一个context（默认为window.document），但它的时间成本。

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