2012-02-27 4 views
4

jsTree를 사용하여 여러 개의 트리 뷰 사이에서 항목을 드래그 앤 드롭합니다. PC에서는 정상적으로 작동하지만, 태블릿에서는 작동하지 않습니다 (Apple과 Android 모두). 나는 JQueryUI가 태블릿을위한 DnD 지원 기능을 내장하고 있지 않다는 것을 알고 있으며, 몇 가지 조정할 수있는 방법을 시도했지만, 그 중 어느 것도 효과가 없었다.jsTree android/ipad tablets에서 드래그 앤 드롭

태블릿의 jsTree에서 드래그 앤 드롭을 사용할 수 있습니까?

감사합니다.

답변

2

필자는 며칠 동안이 문제를 탐구 해 왔으며 jsTree를 사용하는 기존 웹 응용 프로그램을 iPad에 적용하는 데 중점을 두었습니다. jquery.ui.touch.js를 사용하면 대부분의 방법을 사용할 수 있습니다. 터치 이벤트는 jstree가 예상하는 마우스 이벤트에 매핑 될 수 있으며 트리는 드래그 할 수 있지만 드롭 대상은 인식되지 않으며 실제로 drop_check 함수는 호출되지 않습니다. 그래서 거기에 꽤 있지 않습니다.

터치 이벤트 중 일부만 jquery.ui.touch.js와 같은 마우스 이벤트에 매핑 될 수 있기 때문일 수 있습니다. touchstart = mousedown, touchmove = mousemove, touchend = mouseup. 그러나 jstree는 드롭 타겟 검사를 위해 mouseenter와 mouseleave에 의존하고 있으며, 나는 이벤트를 가지고 있지 않습니다. touchenter와 touchleave가 논의되었지만, iPad에서 Safari 브라우저가이 시점에서 이들을 실행하지 않는다고 생각합니다. 나는 좌표를보고 겹침을 검사하여 touchmove 이벤트에서 mouseenter 및 mouseleave 이벤트를 생성하려고 시도했지만 아직 시도하지 않았습니다.


업데이트 : 2012 년 5 월 18 일. 지금은 작동 중입니다. 내가 생각한 것보다 몇 가지 다른 점이 있습니다. 커다란 돌파구는 터치 이벤트 대상 요소가 터치 시작에서 모든 터치 동작을 통해 절대로 바뀌지 않는다는 것을 깨달았을 때였습니다. 그러나 mousemove 이벤트는 이벤트를 가져 오는 요소가 사용자가 이동하는 요소라는 것을 예상하고있었습니다. 그래서 mousemove 이벤트를 touchmove 이벤트의 좌표에있는 요소로 보내도록 플러그인을 변경했으며 챔피언처럼 작동했습니다. 또한 일단 jQuery가 수동으로 mouseenter 및 mouseleave 이벤트를 트리거 할 필요가 없도록 만들었습니다.

오른쪽 클릭 컨텍스트 메뉴 (터치 식에서)는 간단한 테스터 앱에서 작동했지만 상황에 맞는 메뉴 이벤트 후 오른쪽 버튼에 시뮬레이션 된 mouseup 이벤트를 추가 할 때까지 웹 애플리케이션에서는 작동하지 않았습니다.

jquery.ui.touch.js 내 수정 된 버전은 여기에 업로드 한 :이 찾고있는 유일한 사람이 아니에요 알고 기뻐 게시물에 대한 http://code.google.com/p/jquery-ui-for-ipad-and-iphone/issues/detail?id=18

+0

감사합니다. :) jquery.ui.touch.js를 포함하여 몇 가지 라이브러리를 시도했지만 지금까지 아무 것도 작동하지 않았습니다. 나는 또한 일반적으로 Android의 기본 브라우저가 터치 이벤트를 잘 처리하지 못한다는 사실을 알고있었습니다. FireFox는 더 나은 작업을 수행합니다 ... –

+0

나는 여기에서 약간의 진전을 이루었고 실제로 끌어 놓을 수 있습니다! 먼저 'document.elementFromPoint'를 사용하여 터치가 끝난 DOM 요소를 발견하여 터치가 화면을 가로 질러 움직이는 것처럼 추적 할 수있게했습니다. 그런 다음 요소가 변경 될 때마다 mousemove와 함께 mouseleave 및 mouseenter 이벤트를 수동으로 트리거합니다. 커다란 돌파구는 마우스를 누르고있는 동안 changedTouches 요소가 절대로 변경되지 않는다는 것을 깨달았을 때 jquery.ui.touch가 시뮬레이션 된 마우스 이벤트를 원래 요소로 보내고 터치가 그 위에 움직이는 것이 아니라 . –

+0

여전히 마우스 오른쪽 버튼을 클릭하여 작업을 마친 후 공유하게되어 기쁩니다. –