5

부모 프레임과 자식 프레임간에 jQuery Draggable | Droppable | Sortable을 구현하려고합니다. 가 나는이 프로토 타입을 가지고 있지만 일이 몇 가지 이상한 행동이Jquery Sortable 및 부모와 자식 프레임간에 드래그 가능

win = document.getElementById('frame').contentWindow; 

element = win.document.getElementById('sortable'); 
$(element).sortable(); 
console.log(element); 
$("#draggable").draggable({ 
     connectToSortable: $(element), 
    iframefix: true, 
    helper: function() {return $("<div/>").css('background-color','red');} 
}); 

iframe이 페이지에는 다음

$("#sortable").sortable(); 

이 들어 나는 드롭하려고 할 때 그것은 잘 작동 jsfiddle http://jsfiddle.net/vxAzs/5/

입니다 요소를 iframe에 정렬하지만 iframe의 요소를 정렬하려고하면 요소는 두 페이지 모두의 클릭 이벤트에 집착합니다 (따라서 부모와 iframe을 클릭 할 때까지 삭제되지 않습니다). 부모와 iframe 모두에서 .sortable() 호출과 관련이 있다고 생각하지만 삭제하면 삭제할 수 있습니다. link

답변

3

좋아, 여기이 작업을 수행하는 방법은 다음과 같습니다. 부모 프레임에서 요소에 끌기를 작성하여 iframe의 정렬 가능한 목록에 놓으려면 iframe 내부에서 부모 프레임의 요소에 draggable을 생성했습니다

win = document.getElementById('<identifier for Iframe>').contentWindow; 
win.jQuery(dragelement,parent.document).draggable({ 
connectToSortable : $("#sortable") 
)} 

매력처럼 작동합니다!

+0

이 오류가 발생합니다. Uncaught TypeError : Object [object global] 'jQuery'메서드가 없습니다. 어떻게 해결했는지 알려주세요. – vaibought

+0

부모와 자식 프레임 모두에 jQuery를 포함해야합니다 ... –

+0

jquery가 양쪽에 추가되었습니다. 나는 jquery 1.8을 사용하고있다. – vaibought

0

코멘트 코드에서이 라인, 여기

//$(element).sortable({iframefix:true}); 

는 바이올린입니다 변경

iframefix: true, 

iframeFix: true, 
+1

그런 다음 요소가 정렬 가능 목록에 연결되지 않습니다. –

0

iframeFix은 대소 문자를 구분 : :