从外部在iFrame中创建可拖动对象 [英] Creating a draggable object in a iFrame from outside

问题描述

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

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

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

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

编辑：
JQuery监听滑块句柄上的点击和点击事件，创建一个新的听众在mousemove，但在窗口内，而不是框架。我正在考虑更改jquery lib并添加一个上下文（默认情况下是window.document），但是它的时间很贵。

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.

推荐答案

一个工作是这样的：

• 由于滑块实际上不工作，默认情况下不要在开始时调用任何东西

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

创建一个 JavaScript 函数，它将在鼠标被按下时设置滑块的值

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

您需要使ui-slide-handle在被暂停时返回对其父级的引用

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

解决方案链接：

解决方案

这篇关于从外部在iFrame中创建可拖动对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！