IFrame 내부의 jQuery 드래그 가능한 핸들러

기본적으로 부모는 <div>이고 그 안에는 이 있습니다. 부모 div를 드래그하는 핸들로 iframe 내부의 요소가 필요합니다. 이것은 가능한가?

$(node).draggable("option","handle",$('iframe',node).contents().find('#handle')); 
$(node).draggable("option","handle",$('iframe',node).contents().find('#handle')[0]);

그것은 올바른 DOM 요소를 목표로하고 있지만 드래그하지 않습니다

이 나는 노력했다. iframe의 숨겨진 div ontop을 오버레이하는 것이 가능할 수도 있지만 위치가 절대 일 때 iframe에서 div에 이벤트를 가져 오는 것으로 나타났습니다. 이상한.

출처

2010-08-06 Louis

iFrameFix를 사용하여 Draggable은 여전히 저주했습니다. 대화 상자가 적합한 해결책 인 경우 대화 상자가 더 잘 작동합니다. 그것은 여전히 드래그 가능하지만 또한 닫을 수 있습니다. – user420667

나는이 소년에게 찌르는 것을 결정했다. 내부 iframe 노드를 핸들로 사용하는 것은 거의 진전이 없었다. 어쨌든, 여기에 두 가지 해결책이 있습니다. 첫 번째 방법은 실제로 잘 작동하지 않지만 작동 시키려면 더 바람직 할 수 있습니다. (데모에서 표절)

main.html

<div id="draggable" class="ui-widget-content" style="position:relative;"> 
    <p class="ui-widget-header">I can be dragged only by this handle</p> 
    <iframe name="iframe1" src="inner-handle.html" height=50 width=80></iframe> 
</div>

내부 - handle.html

<html> 
    <head> 
     <script type="text/javascript" src="../../jquery-1.4.2.js"></script> 
    </head> 
    <body> 
     <div id="innerHandle">handle</div> 
    </body> 
</html>

자바 스크립트

$(function() { 
    var moveEvent; 
    $(document).mousemove(function (e) { 
     moveEvent = e; 
    }); 

    $("#draggable").draggable(); 
    $('iframe', '#draggable').load(function() { 
     $('iframe', '#draggable')[0].contentWindow.$('#innerHandle').mousedown(function (e) { 
      $('#draggable').draggable().data('draggable')._mouseDown(moveEvent); 
      return false; 
     }); 
    }); 
});

이 뭔가를 찾을 걸 렸어요 그 " 일했다. " 여기서 문제는 mousedown 이벤트가 iframe 내부의 요소에서 발생했기 때문에 마우스 이벤트가 주 문서가 아닌 iframe과 관련이 있다는 것입니다. 해결 방법은 문서에서 이동 이벤트를 가져 와서 마우스 위치를 잡는 것입니다. 문제는 마우스가 iframe 안에 있으면 부모 문서에 따라 움직이지 않는다는 것입니다. 즉, 마우스가 iframe의 가장자리에 도달하여 부모 문서로 드래그 이벤트가 발생 함을 의미합니다.

이 문제를 해결하려면 마우스 움직임과 관련하여 iframe의 계산 된 위치로 이벤트를 수동으로 생성하는 것이 좋습니다. 따라서 마우스가 iframe 내에서 움직일 때 iframe의 좌표를 사용하여 부모 문서로 움직임을 계산하십시오. 이것은 iframe이 자체에 대한 절대 위치 DIV를 가지고

$('iframe', '#draggable')[0].contentWindow.$('#innerHandle').mousedown(function (e) { 
    // do something with e 
    $('#draggable').draggable().data('draggable')._mouseDown(e); 
    return false; 
});

두 번째 솔루션은 당신이 언급 한 방법입니다, 당신은 mousedown 아닌 MouseMove 이벤트에서 이벤트를 사용할 필요가 있다는 것을 의미한다.나는

<div id="draggable" class="ui-widget-content" style="position:relative;"> 
    <p class="ui-widget-header">I can be dragged only by this handle</p> 
    <iframe name="iframe1" src="inner-handle.html" height=50 width=80></iframe> 
    <div style="position: absolute; height: 30px; width: 30px; background-color: black; z-index: 1000;"></div> 
</div>

당신의 사업부는 Z- 인덱스가 꺼져 있기 때문에 될 수있는 iframe을 배후의 문제, 즉, iframe이의 상단에있을 사업부를 얻기에 아무런 문제가 없다. iframe 앞에 div를 선언하고 z- 색인을 지정하지 않으면 iframe이 맨 위에 표시됩니다.

어느 쪽을 선택하든, 행운을 빈다.

출처

2010-08-12 23:35:18

힘든 노력에 감사드립니다. 나는 두 번째 해결책을 시도 할 것이라고 생각한다. 첫 번째는 너무 버그가 많을 것이라고 생각합니다. 고마워요! – Louis

이 (firebug와 활성화) 무슨 일이 발생하는 경우 :

var frameContent = $('iframe',node).contents() 
var handle = frameContent.find('#handle'); 
console.debug(frameContent, handle)

handle 요소의 목록이 포함되어 있습니까? 그렇다면 frameContent 인 Document 개체를주의 깊게 살펴 봅니다. URL은 "about:blank"입니까? 이것은 직감이지만, 이러한 결과물을 얻는다면 프레임 내용이로드 된 (즉, #handle 요소가 존재하기 전에) 전에 jQuery 선택기 을 실행하고있는 것일 수 있습니다.

IFRAME의 문서에 이벤트를 추가하고 window.parent을 통해 상위 프레임과 통신 할 수 있습니다.

출처

2010-08-09 18:41:35 Adam

지금 테스트 할 수 없으므로 곧 시도하겠습니다. iframe의 window.onload 옵션을 변경하여 준비가되었다고 가정합니다. 찾은 내용을 기록하면 올바른 DOM 요소입니다. 아마도 그것은 불가능합니다. – Louis

노력이

$ ('# 사업부') 드래그 ({iframeFix : TRUE}).;

이게 작동해야합니다.

출처

2010-11-17 09:31:36 vishal

Genius! 정말 고맙습니다! – mateuscb

IFrame 내부의 jQuery 드래그 가능한 핸들러

답변

관련 문제