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

91

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

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

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

— Fenton
소스

어떤 기기를 타겟팅하고 있습니까?

— Marko

22

@Marko-그들 모두. 내가 누구를 제외하면 웹이 아닙니다.

— Fenton

당신이 전혀 jQuery를 원하지 않는 경우, 이것 좀 걸릴 github.com/capriza/mobile-touch

— oriharel

101

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

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

http://touchpunch.furf.com/

— Vichsu
소스

4

기본 Android 4.0 브라우저에서는 작동하지 않습니다. 그래도 모바일 Chrome에서 작동합니다.

— Timmmm

드래그하기 전에 먼저 길게 눌러야합니까? 우리가 할 수 드래그 후 우리가 아래로 스크롤에 원하는 요소에 전체 너비를 사용하는 경우 때문에 자동으로 요소를 드래그

— CaffeineShots

1

html 파일, 특히 jquery-ui의 헤드에 마지막 <script> 선언이 있는지 확인하십시오. 그렇지 않으면 작동하지 않습니다

— whyoz

@vichsu 내 문제를 완벽하게 해결 한이 답변에 감사드립니다.

— 브래디 Zhu의

정말 안 드 로이드 4.0 ..에서 작동하지 않습니다 또는 해결 방법이 있습니까?

— rashidnk

23

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

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

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

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

— remdevtec
소스

7

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

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

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

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

— 조리 세 브레 히츠
소스

이것은 매우 흥미 롭습니다. 그래서 저는 그것을 다운로드하고 플레이를 할 것입니다-안드로이드에서 테스트를했고 대부분 작동합니다. 그래서 세부 사항을 보시면됩니다-감사합니다!

— Fenton

6

좋아요, 저는 아마도 그 라이브러리를 특별히 사용하지 않을 것입니다 (최소화 될 때 200k가 넘는 것).하지만 그 안에 포함 된 개념을 사용하여 종류의 아이디어를 얻을 수 있습니다. 일반적인 아이디어는 페이지를 화면 크기보다 크게 해석 할 수 없도록 만드는 것입니다. 이로 인해 모바일 브라우저가 스 와이프 / 드래그를 가로 채지 못하도록 속입니다!

— Fenton

1

Sohnee, 우리는 라이브러리에서 사용하지 않는 부분을 제거하는 Touch 1.0 용 빌더를 추가하고 있습니다. 이렇게하면 공간이 크게 줄어들 것입니다. 또한 gzip으로 압축 된 전체 라이브러리는 50-80k입니다.

— Michael Mullany

7

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

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

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

— 토머 알 모그
소스

라이센스 유형? 비어 있는? 사이트를 확인했지만 도서관을 파는 것 같습니다.

— ShanerM13

내가 대답 한 지 6 년이됐다. 그들이 라이센스 유형을 변경했는지 확실하지 않습니다. 2014 년에 무료로 사용되었습니다 ...

— Tomer Almog

IDK를 어떻게 간과했지만 greensock.com/licensing

— ShanerM13

기본적으로 제품이 무료이면 무료이며 (일회성 요금을 허용하는 경우는 예외), 그렇지 않으면 비즈니스 라이센스를 받아야합니다.

— ShanerM13

3

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

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

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

— 프로 스티 Z
소스

1

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

누군가를 돕는 희망

— 테드 베이커
소스

확실히 도움이되었습니다. 감사합니다. 정렬 가능한 체크리스트를 만들고 있었고 터치 펀치로 만든 div가 확인란을 덮고 있었기 때문에 확인란이 클릭되지 않았습니다. 이것은 그것을 해결했고 작동했습니다. 감사합니다 ....

— Mikeys4u

1

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

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

— 알퍼 아이 딩굴
소스

1

정렬 가능한 JS 라이브러리 터치 스크린과 호환되며 jQuery를 필요로하지 않습니다.

터치 스크린을 처리하는 방식은 항목을 드래그하기 시작하기 위해 약 1 초 동안 화면을 터치해야하는 것입니다.

또한이 라이브러리가 JQuery UI Sortable보다 빠르게 실행되고 있음을 보여주는 비디오 테스트를 제공합니다.

— Zoup
소스