[javascript] 모바일 장치에서 HTML 드래그 앤 드롭

Question 1

jQuery UI draggable and droppable과 같은 JavaScript를 사용하여 웹 페이지에 끌어서 놓기를 추가 할 때 모바일 장치에서 브라우저를 통해 볼 때이 작업을 수행하려면 어떻게해야합니까? 페이지 등을 스크롤하기위한 전화?

모든 솔루션을 환영합니다 … 내 초기 생각은 다음과 같습니다.

드래그 할 항목을 “들어 올려”항목을 놓을 영역을 클릭하도록하는 모바일 장치 용 버튼이 있습니다.
모바일 장치 용으로이 작업을 수행하는 앱을 작성하고 웹 페이지에서 작동하도록하십시오!
귀하의 제안과 의견을 부탁드립니다.

Question 2

jQuery UI Touch Punch는 모든 것을 해결합니다.

jQuery UI에 대한 터치 이벤트 지원입니다. 기본적으로 터치 이벤트를 jQuery UI에 다시 연결합니다. iPad, iPhone, Android 및 기타 터치 지원 모바일 장치에서 테스트되었습니다. 정렬 가능한 jQuery UI를 사용했으며 매력처럼 작동합니다.

http://touchpunch.furf.com/

Question 3

터치 이벤트를 드래그 앤 드롭으로 변환하기위한 새로운 폴리 필이있어 HTML5 드래그 앤 드롭을 모바일에서 사용할 수 있습니다.

폴리 필은 이 포스트 에서 Bernardo Castilho에 의해 소개되었습니다 .

다음은 데모입니다.해당 게시물 입니다.

이 게시물은 또한 폴리 필 디자인에 대한 몇 가지 고려 사항을 제시합니다.

Question 4

Sencha Touch 베타 버전 은 드래그 앤 드롭을 지원합니다.

DnD 예제를 참조 할 수 있습니다. . 그건 그렇고 웹킷 브라우저에서만 작동합니다.

해당 로직을 웹 페이지에 개조하는 것은 아마도 어려울 것입니다. 내가 이해했듯이 그들은 모든 브라우저 패닝을 비활성화하고 완전히 자바 스크립트로 패닝 이벤트를 구현하여 드래그 앤 드롭을 올바르게 해석 할 수 있습니다.

업데이트 : 원래 예제 링크가 죽었지 만이 대안을 찾았습니다 :
https://github.com/kostysh/Drag-Drop-example-for-Sencha-Touch

Question 5

데스크톱, 모바일, 태블릿 (Windows Phone 포함)에서 작동하는 드래그 앤 드롭 + 회전을 만들어야했습니다. 마지막은 더 복잡하게 만들었습니다 (mspointer 대 터치 이벤트).

솔루션은 The Great Greensock 라이브러리 에서 나왔습니다.

동일한 개체를 드래그 및 회전 가능하게 만들기 위해 약간의 점프가 필요했지만 완벽하게 작동합니다.

Question 6

Bernardo Castilho 의 것과 확실히 유사한 Tim Ruffle의 드래그 앤 드롭 polyfill을 시도해 볼 수도 있습니다 (@remdevtec 답변 참조).

간단하게 npm install mobile-drag-drop --save (예 : 바우어와 같은 다른 설치 방법 사용 가능)

그런 다음 터치 감지에 의존하는 모든 요소 인터페이스가 모바일에서 작동해야합니다 (예 : 스크롤 + 드래그하는 대신 요소 하나만 드래그).

Question 7

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를 추가합니다.

누군가를 돕는 희망

Question 8

내 해결책은 다음과 같습니다.

$(el).on('touchstart', function(e) {
    var link = $(e.target.parentNode).closest('a')
    if(link.length > 0) {
        window.location.href = link.attr('href');
    }
});