터치 장치의 드래그 가능 속성

Question

draggable 속성은 터치 장치의 브라우저에는 영향을 미치지 않는 것으로 보입니다.

<div draggable="true">Draggable Box</div> 

마우스로

https://jsfiddle.net/41z5uz4t/

, 나는 주위에이 요소를 드래그 할 수 있습니다. 터치 스크린 (Windows 10, Chrome)에서 드래그하려고하면 뒤로 탐색과 같은 일반적인 터치 이벤트가 우선시되는 것 같습니다. 나는 그것을 잡고 그것을 누른 다음 드래그했습니다. 이것도 작동하지 않습니다.

Chrome에서이 문제를 해결하기위한 polyfill이 있습니까? 나는 뭔가 다른 일을하기로되어 있나?

Answer 1

Draggable 속성은 "experimental technology"이며 현재 주요 모바일 브라우저에서 지원되지 않습니다.

Drag'n'Drop UI를 만들려면 greensock nice library과 Touchpunch with jQuery UI과 같은 JS 라이브러리를 사용해야하며 훨씬 더 많은 검색 만이 웹에 있습니다.

드래그 가능한 속성은 이 아닙니다. 현재 주요 모바일 브라우저에서을 지원하지 않습니다.

편집 : 크롬에

이동 :

가 크롬에 버그가 나는 어쩌면 당신에게 도움을 줄 수있는 솔루션을 발견 귀사와 같은 터치 스크린 장치와 것 같다 // 플래그와 "터치 이벤트 사용"설정을 "자동"에서 "사용"으로 변경하십시오. Chrome의 현재 버전은 Windows 10의 터치 기능을 감지하지 못합니다.

발견 here.

아직 실험적 속성 인 경우 해당 작업에 js 라이브러리를 사용하는 것이 좋습니다.

Answer 2

이 효과를 얻으려면 jQuery를 사용하십시오.

http://touchpunch.furf.com/

은 드래그 객체와 라인 전에이 코드를 넣어 :

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script> 

그리고 드래그 객체 선 후이를 넣어 : 여기에 있음을 수행하는 방법에 대한 안내입니다

<script>$('#draggablebox').draggable();</script>으로, div가 id가 draggablebox 인 것으로 가정합니다.