Javascript Windows phone 7.5에서 드래그 앤 드롭

Question

Windows 7.5 전화에서 작동하는 끌어서 놓기 기능을 얻으려고합니다. 처음에는 Windows 7.5를 제외한 모든 브라우저에서 작동하는 jquery ui draggable을 사용해 보았습니다. 나중에 더 자세히 살펴보면 Windows에서 터치 시작, touchend 및 touchmove 이벤트가 없음을 알았습니다. 그래서 놀랍게도 발사 한 mousedown, mousemove 이벤트를 사용하여 작동 시키려고했습니다. 그러나 그들은 적절한 순서로 발사하지 않습니다. (mousemove 전에 mousemove 화재). dragstart 및 dragend 이벤트가 작동하지도 않았습니다. 이 작업을 수행해야합니다. 의견 있으십니까 ?

/*Eg1:does not work*/ 
$("#draggable").draggable(); 

/*Eg2:This event does not fire*/ 
$("#draggable").bind("touchstart touchmove touchend", function(){ 
alert("touch events supported");}) 

/*Eg3: In this case, mousemove fires before mousedown.*/ 
$("#draggable").bind("mousedown", function(){ 
alert("mousedown");}); 

$("#draggable").bind("mousemove", function(){ 
alert("mousemove");}); 

Answer 1

가 난 단지 IE 10 사용 윈도우 폰 8에서 자바 스크립트 작업 경험이 (WP7.5 및 WP7.8에서 IE 9는 달리)하지만 당신은 내 접근 시도를 줄 수 있습니다. WP8 (IE10) 마이크로 소프트에서

는 pointer 이벤트 MSPointerMoveMSPointerDown 대신 touchstartMSPointerUp, touchmove 및 touchend 이벤트를 지원합니다. 이들을 사용하여 작동하는지 확인하십시오. 내가 만든했던 예에서

하지만, 난 IE 10 행복하게 표준 마우스 이벤트 (mouseupmousemovemousedown)을 사용 정도에 잘 일을 그 고유의 이벤트를 사용할 필요가 없습니다했다. 나는 당신이 질문에 언급 한 것처럼 사건의 순서에 아무런 문제가 없었습니다. 드래그하는 동안 나를 위해 발생한 주된 문제는 mousemove 이벤트가 (브라우저에 의해) 트리거되는 것을 멈추고 브라우저가 페이지를 패닝하기 시작하여 드래그 한 요소를 림보 상태 (mousemove 또는 mouseup이 트리거 됨)로 남겨두기 시작했습니다. event.preventDefault()을 사용하면 페이지가 패닝되는 것을 막지 못했기 때문에 도움이되지 않았습니다. 이 문제를 극복하기 위해 필자는 터치 이벤트에 대한 Microsoft의 설명서를 살펴본 후이 CSS 라인을 발견했습니다.

-ms-touch-action: none; 

내가 할 내 요소에 적용 는을 끌어 내 문제가 해결되었습니다. 위의 독점적 인 CSS 속성 here에 대한 모든 내용을 읽을 수 있습니다. 이 속성을 페이지의 전체 body에 적용하지 않도록 조심하십시오. 이전에 페이지 패닝 및 확대/축소의 기본 브라우저 동작을 방지하므로이 속성을 이전에 적용했습니다. 내가 말했듯이 요소를 끌면으로 끌고 작동합니다.

다시 WP 8에 대한 내 경험입니다. 은 이전 버전의 Windows Phone에서 작동하는지 알 수 없습니다.