2010-12-20 11 views
5

Mam element, który można przeciągnąć poza ramką iframe i wewnątrz niego znajduje się podrzucany cel. Tutaj pokazałem element iframe jako zawierający fragment kodu HTML, który jest ładowany przez jego atrybut src.jQuery oraz iframe i dziwne pozycjonowanie: czy istnieje obejście?

<div id="draggables"> 
    <img src="drag-me.gif"> 
</div> 

<iframe src="iframe-src.html" id="iframe"> 
    <!-- HTML gubbins --> 

    <div id="droppable">&nbsp;</div> 

    <!-- More HTML gubbins --> 
</iframe> 

używam niektóre jQuery (UI przeciągalne/droppable), aby robić rzeczy:

$("#iframe").load(function() { 
    var $this = $(this); 
    var contents = $this.contents(); 

    contents.find('#droppable').droppable({ 
     drop: function (event, ui) { alert('dropped'); } 
    }); 
    $('#draggables img').draggable(); 
}); 

W draggables stać przeciągać i droppable powodzeniem cel kropla. Problem polega na tym, że strefa lądowania dla obszaru upuszczania nie jest tam, gdzie jest wyświetlana na ekranie. Oznacza to, że alert jest uruchamiany, gdy przeciągany jest upuszczany gdzieś nad celem upuszczenia, a nie na sam cel.

Kilka testów sugerowałem, że różnica między miejscem docelowym na ekranie i miejscem, w którym jQuery myśli, jest związana z pionową pozycją elementu iframe na stronie, ale nie mogę znaleźć bezpośredniej korelacji. Czy ktoś wie, czy ten problem został zbadany przez kogokolwiek w dowolnym miejscu i, być może, rozwiązany?

Jeśli to nie możliwe, czy ktoś może zaproponować sposób, w jaki mogę załadować zewnętrzny plik HTML na moją stronę bez korzystania z elementu iframe i bez interakcji między strukturami i stylami dwóch stron? Zastanawiam się, czy załadować stronę wewnętrzną bezpośrednio i za pomocą javascriptu, aby narysować elementy sterujące strony wokół niego.

TIA Altreus

+0

Jestem stoi ten sam problem !! daj mi znać, jeśli ci się uda – Dharmesh

+0

Znaleziono to wyszukiwanie odpowiedzi na http://stackoverflow.com/questions/36368327/dropping-a-draggable-div-into-sortable-table-which-is-inside-the-iframe-and -on-d Wygląda na to, że przesunięcie może być kluczem, ale nie widać aktualizacji części przewijania przez GIST poniżej. – Twisty

Odpowiedz

0

Próbujesz uzyskać dostęp do elementu nadrzędnego od wewnątrz iframe dziecięcej. Nie testowałem go osobiście, ale spróbuj ustawić kontekst dla selektora jquery. W przeciwnym razie będzie wyglądać tylko wewnątrz bieżącego elementu iFrame.

$('#draggables img', parent).draggable(); 
+0

Pytanie od trzech lat, ale na wszelki wypadek wydaje mi się, że to działa: '$ ('# draggables img', window.top.document)' –

Powiązane problemy