2012-02-08 3 views
0

드래그 앤 드롭이 모바일 브라우저에서 작동하지 않는다는 것을 알게되었습니다. 드래그 앤 드롭이 드래그 가능하고 드래그 가능하며 정렬 가능한 jQuery UI를 사용하여 작성한 인터페이스를 테스트하고있었습니다. 모바일 브라우저에서 이벤트가 실행되는 다른 방법이 있다고 가정합니다.JavaScript Mobile 드래그 앤 드롭

아직 모바일 브라우저에서 드래그 앤 드롭을 지원하는 JavaScript 프레임 워크가 있습니까?

그렇다면 기본 드래그/드롭 기능을 함께 사용하는 방법에 대한 아이디어가 있습니까?

답변

2

까다로운 것 ... 나는 당신이 문제를 아주 많이 강조했다고 생각합니다. 터치 이벤트는 jQuery 드래그/드롭 기능과 아직 통합되지 않았으며 드래그/드롭 라이브러리가 있는지 확실하지 않습니다. 모바일 장치 범위를 목표로합니다.

내가 말할 수있는 것은 당신이 은 그 이벤트를 직접 시작할 수 있지만, 모든 것을 직접 쓰고 싶지는 않습니다. 간단히 말해서, 모바일 장치를 확인하고 이벤트는 다음과 같이 얻을 수있는 부착 :

if (navigator.userAgent.match(/iphone/i) || 
    navigator.userAgent.match(/ipad/i) || 
    navigator.userAgent.match(/ipod/i) || 
    navigator.userAgent.match(/android/i)) 
{ 
    var element = $('#your_draggable_element_id'); 
    element.bind('touchstart', touchStartFunctionHere); 
    element.bind('touchmove', touchMoveFunctionHere); 
    element.bind('touchend', touchEndFunctionHere); 
} 

다음에 한 일을 통해 당신이 제어 할 것이라고 이벤트로 당신을 패치 할 것이다. 드래그 동작, 터치 등의 위치를 ​​분명히 원할 것입니다. 이벤트 자체에서 드래그 이동, 터치 등을 얻을 수 있습니다.

function touchMoveFunctionHere(event) 
{ 
    event.preventDefault(); 
    var x = event.originalEvent.touches[0].pageX; 
    var y = event.originalEvent.touches[0].pageY; 

    ... 

} 

아니 완벽한 솔루션 당신이 찾고 있던, 나는 다른 사람이 모바일 장치에 대한 드래그/드롭 프레임 워크에 도움이 되거 수 있기를 바랍니다, 그러나 그것은 시작의 : 예를 들어, 위의 코드를 기반으로! 희망이 도움이!

+2

이러한 이벤트가 사용 가능한지 테스트하려면 modernizr과 같은 js lib를 사용해야합니다. 사용자 에이전트를 테스트하는 것은 새로운 악의 근원입니다. –

+2

하하 하하! 맞아, 내 뇌의 일부를 비추는 당신의 의견 +1은 내가 잃어버린 줄 알았는데 ...;) –

+0

환영합니다 : p –