jQuery 모바일 browser_jquery에서 드래그 앤 드롭 동작의 어려움 분석

이 기사에서는 jQuery 모바일 브라우저에서 드래그 앤 드롭의 어려움을 분석하기 위해 예제를 사용합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

원래는 아이폰처럼 마음대로 드래그할 수 있는 컨트롤 버튼을 모바일 웹페이지에 구현하고 싶었으나 결국 허사로 돌아갔네요,

모바일 브라우저에서는 드래그 앤 드롭 동작이 일반적이지만 모바일 브라우저에서는 드래그 앤 드롭이 가능한 구성 요소를 구현하는 것이 불가능합니다.

먼저 PC 웹페이지에서 드래그 앤 드롭 동작이 어떻게 수행되는지 살펴보겠습니다.

먼저 클릭하면 동작을 수행하는 버튼이 있습니다. iPhone의 제어 버튼처럼 마음대로 드래그할 수 있습니다.

위처럼 회색 레이어를 작성하기가 쉽지 않네요,

먼저 회색 레이어의 위치 속성을 절대값으로 변경해야 합니다. 그런 다음 jquery 스크립트에서 구현해야 할 작업의 주요 요점은 클릭과 mousedown mouseup 동작 쌍을 구별하는 것입니다. 원래는 mousedown mouseup과 동일하지만 일정 기간 동안 mousedown 후 unbind는 cilck 동작에 대한 레이어 바인딩을 즉시 지워서 시스템에 mousedown 이후의 동작이 클릭과 관련이 없음을 알려줍니다.

코드 복사 코드는 다음과 같습니다.

 
 
<머리> 
 
 
 
 
 
 
<본문> 

out

 
 
 
<스크립트 유형="텍스트/자바스크립트"> 
$(document).ready(function() { 
var 시간 초과 ; 
     
    $("#mydiv").mousedown(function(e) { 
        >         $("#mydiv").click(function() { 
            $("#mydiv").text("被点击"); 
        }); 
        timeout = setTimeout(function() { 
            $("#mydiv").text("금지"); 
            /*以下的语句之后，用户鼠标左键放起，则不会判定为click动작품*/ 
            $("#mydiv").unbind("클릭"); 
            $("#mydiv").mousemove(함수 (e) { 
                /*这里是为了鼠标拖拽图层移动的时候，鼠标刚好在图层中间*/ 
                document .getElementById("mydiv").style.left = e.pageX-50 "px"; 
                document .getElementById("mydiv").style.top = e.pageY-50 "px"; 
            });  
        }, 1000)         
    }); 
         
    $("#mydiv").mouseup(function() { 
        ClearTimeout(타임아웃); 
        >         $("#mydiv").unbind("mousemove"); 
        $("#mydiv").text("아웃");     
    });  
         
    $("#mydiv").mouseout(function() { 
        ClearTimeout(타임아웃); 
        $("#mydiv").unbind("mousemove"); 
        $("#mydiv").text("아웃"); 
    }); 
}); 

마우스아웃 이벤트를 작성해야 하는 이유는 브라우저의 버그가 검게 변해 마우스업 판단을 회피하는 것을 방지하기 위해 이전 글 [JQuery에서는 길게 누르기 버튼 트리거링 이벤트를 구현합니다]와 같습니다. .
위의 내용은 모든 주요 PC 브라우저에서 테스트되었으며 IE8과 완벽하게 호환되므로 매우 완벽해 보입니다.

그런데 일단 휴대폰의 경우에는 큰 문제가 발생하는데

구글 브라우저의 휴대폰 디버깅 모드에서만 실제 기기에 적용되기 전에는 사용할 수 없습니다!

모바일 브라우저에서는 jquery의 클릭 이벤트에 문제가 없습니다. 그러나 길게 누르기 이벤트는 jquery 모바일에서 .on("taphold"로 대체되어도 휴대폰의 시스템 오른쪽 클릭 기능과 충돌합니다. , function (){}); 이벤트를 추가하거나 위의 mousedown에 e.preventDefault()를 추가합니다. IE는 window.event.preventDefault()를 사용합니다. 모바일 브라우저의 내장 메뉴를 비활성화하고 길게 누르는 기능만 사용할 수 있습니다. 유지되며 드래그의 주요 기능은 mousemove 동작이고 모바일 브라우저는 mousemove() 동작을 전혀 지원하지 않기 때문에 드래그에 대해 생각할 필요가 없습니다.

그래서 누군가 항의했습니다. jquery UI에서는 .draggable()을 사용할 수 있고 jquerymobile에서는 스와이프 이벤트를 사용할 수 있는데 이는 실제로 html5의 드래그 이벤트입니다!

그러나 위의 모든 해결 방법은 모두 소용이 없습니다.

jquery ui의 .draggable(), jquerymobile의 swipe 이벤트, html5의 drag 이벤트의 경우 브라우저의 모바일 디버깅 모드를 사용할 수 있는데 드래그가 전혀 불가능하다는 것을 알 수 있습니다.

이 기사가 모든 사람의 jquery 프로그래밍 설계에 도움이 되기를 바랍니다.