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

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

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

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

编辑:JQuery侦听滑块手柄上的单击并在单击事件上它在mousemove上创建一个新的侦听器,但在窗口内,而不是框架。 我正在考虑更改jquery lib并添加一个上下文(默认情况下是window.document)但是它的时间很长。

这方面的工作是:

  • 由于滑块实际上默认不起作用,所以不要在开始时调用任何东西

  • 创建一个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'); }) }) }); 

解决方案链接: