모바일 장치에서 HTML 드래그 앤 드롭
jQuery UI draggable and droppable과 같은 JavaScript를 사용하여 웹 페이지에 끌어서 놓기를 추가 할 때 모바일 장치에서 브라우저를 통해 볼 때이 작업을 수행하려면 어떻게해야합니까? 페이지 등을 스크롤하기위한 전화?
모든 솔루션을 환영합니다 ... 내 초기 생각은 다음과 같습니다.
드래그 할 항목을 "들어 올려"항목을 놓을 영역을 클릭하도록하는 모바일 장치 용 버튼이 있습니다.
모바일 장치 용으로이 작업을 수행하는 앱을 작성하고 웹 페이지에서 작동하도록하십시오!
귀하의 제안과 의견을 부탁드립니다.
jQuery UI Touch Punch는 모든 것을 해결합니다.
jQuery UI에 대한 터치 이벤트 지원입니다. 기본적으로 터치 이벤트를 jQuery UI에 다시 연결합니다. iPad, iPhone, Android 및 기타 터치 지원 모바일 장치에서 테스트되었습니다. 정렬 가능한 jQuery UI를 사용했으며 매력처럼 작동합니다.
터치 이벤트를 드래그 앤 드롭으로 변환하는 새로운 폴리 필이있어 HTML5 드래그 앤 드롭을 모바일에서 사용할 수 있습니다.
폴리 필은 이 포스트 에서 Bernardo Castilho에 의해 소개되었습니다 .
해당 게시물 의 데모 입니다.
이 포스트는 또한 폴리 필 디자인에 대한 몇 가지 고려 사항을 제시합니다.
Sencha Touch 의 베타 버전 은 드래그 앤 드롭을 지원합니다.
DnD 예제를 참조 할 수 있습니다 . 그건 그렇고 웹킷 브라우저에서만 작동합니다.
이 로직을 웹 페이지에 개조하는 것은 아마도 어려울 것입니다. 내가 이해했듯이 그들은 모든 브라우저 패닝을 비활성화하고 완전히 자바 스크립트로 패닝 이벤트를 구현하여 드래그 앤 드롭의 올바른 해석을 허용합니다.
업데이트 : 원래 예제 링크가 죽었지 만이 대안을 찾았습니다 :
https://github.com/kostysh/Drag-Drop-example-for-Sencha-Touch
데스크톱, 모바일, 태블릿 (Windows Phone 포함)에서 작동하는 드래그 앤 드롭 + 회전을 만들어야했습니다. 마지막은 더 복잡하게 만들었습니다 (mspointer 대 터치 이벤트).
솔루션은 The Great Greensock 라이브러리 에서 나왔습니다.
동일한 물체를 드래그 및 회전 가능하게 만들기 위해 약간의 점프가 필요했지만 완벽하게 작동합니다.
Jquery Touch Punch는 훌륭하지만 드래그 가능한 div의 모든 컨트롤을 비활성화하여이를 방지하려면 줄을 변경해야합니다 ... (작성 당시-줄 75)
변화
if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])){
읽다
if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0]) || event.originalEvent.target.localName === 'textarea'
|| event.originalEvent.target.localName === 'input' || event.originalEvent.target.localName === 'button' || event.originalEvent.target.localName === 'li'
|| event.originalEvent.target.localName === 'a'
|| event.originalEvent.target.localName === 'select' || event.originalEvent.target.localName === 'img') {
'잠금 해제'하려는 각 요소에 대해 원하는만큼 ors를 추가합니다.
누군가를 돕는 희망
Bernardo Castilho 의 것과 확실히 유사한 Tim Ruffle의 드래그 앤 드롭 polyfill을 시도해 볼 수도 있습니다 (@remdevtec 답변 참조).
간단히 수행하십시오 npm install mobile-drag-drop --save
(예 : 바우어와 같은 다른 설치 방법 사용 가능)
그런 다음 터치 감지에 의존하는 모든 요소 인터페이스가 모바일에서 작동해야합니다 (예 : 스크롤 + 드래그하는 대신 요소 하나만 드래그).
내 해결책은 다음과 같습니다.
$(el).on('touchstart', function(e) {
var link = $(e.target.parentNode).closest('a')
if(link.length > 0) {
window.location.href = link.attr('href');
}
});
The Sortable JS library is compatible with touch screens and does not require jQuery.
The way it handles touch screens it that you need to touch the screen for about 1 second to start dragging an item.
Also, they present a video test showing that this library is running faster than JQuery UI Sortable.
참고URL : https://stackoverflow.com/questions/3172100/html-drag-and-drop-on-mobile-devices
'developer tip' 카테고리의 다른 글
태그 시스템 구현 방법 (0) | 2020.09.19 |
---|---|
자바 마이그레이션 (0) | 2020.09.19 |
Github Commit RSS 피드 설정 (0) | 2020.09.19 |
문자열을 변수 이름으로 변환하려면 (0) | 2020.09.19 |
React에서 자동 크기 조정 된 DOM 요소의 너비에 어떻게 응답 할 수 있습니까? (0) | 2020.09.19 |