자바스크립트 터치 디바이스용 드래그 앤 드롭

자바스크립트 터치 디바이스용 드래그 앤 드롭

현재 상태로는 이 질문은 우리의 Q&A 형식에 맞지 않습니다.사실, 참고 자료 또는 전문 지식에 의해 답변이 뒷받침되기를 기대하지만, 이 질문은 토론, 주장, 여론 조사 또는 토론을 요청할 가능성이 높습니다.만약 이 질문이 개선되고 다시 열릴 수 있다고 생각한다면,안내를 받기 위해 헬프 센터를 방문합니다.

닫힘10년 전에.

터치 기기에서 작동하는 드래그 앤 드롭 플러그인을 찾고 있습니다.

저는 "dropable" 요소를 허용하는 jQuery UI 플러그인과 비슷한 기능을 원합니다.

jqtouch 플러그인은 드래그를 지원하지만 드롭은 지원하지 않습니다.

아이폰/아이패드만 지원하는 드래그앤드롭입니다.

안드로이드/ios에서 작동하는 드래그 앤 드롭 플러그인의 방향을 알려줄 수 있는 사람?

...아니면 드롭 가능성을 위해 jqtouch 플러그인을 업데이트할 수도 있습니다. Andriod와 IOS에서 이미 실행되고 있습니다.

감사합니다!

마우스 이벤트를 터치로 변환하는 추가 라이브러리와 함께 드래그 앤 드롭을 위한 Jquery UI를 사용할 수 있습니다. 이 라이브러리는 https://github.com/furf/jquery-ui-touch-punch, 이며 Jquery UI는 터치 디바이스에서 작동해야 합니다.

아니면 제가 사용하고 있는 이 코드를 사용하시면 됩니다. 마우스 이벤트를 터치로 변환하여 마법처럼 작동합니다.

function touchHandler(event) {
    var touch = event.changedTouches[0];

    var simulatedEvent = document.createEvent("MouseEvent");
        simulatedEvent.initMouseEvent({
        touchstart: "mousedown",
        touchmove: "mousemove",
        touchend: "mouseup"
    }[event.type], true, true, window, 1,
        touch.screenX, touch.screenY,
        touch.clientX, touch.clientY, false,
        false, false, false, 0, null);

    touch.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}

function init() {
    document.addEventListener("touchstart", touchHandler, true);
    document.addEventListener("touchmove", touchHandler, true);
    document.addEventListener("touchend", touchHandler, true);
    document.addEventListener("touchcancel", touchHandler, true);
}

그리고 문서에서 ready는 init() 함수를 호출합니다.

여기서 찾은 코드

John Landheer가 코멘트에서 언급한 것처럼, 이 기능을 사용하고 '클릭' 기능을 유지하고자 하는 사람은 몇 가지 수정만 하면 됩니다.

전역을 추가합니다.

var clickms = 100;
var lastTouchDown = -1;

그런 다음 스위치 문을 원래에서 다음으로 수정합니다.

var d = new Date();
switch(event.type)
{
    case "touchstart": type = "mousedown"; lastTouchDown = d.getTime(); break;
    case "touchmove": type="mousemove"; lastTouchDown = -1; break;        
    case "touchend": if(lastTouchDown > -1 && (d.getTime() - lastTouchDown) < clickms){lastTouchDown = -1; type="click"; break;} type="mouseup"; break;
    default: return;
}

당신은 당신의 취향에 맞게 '클릭'을 조정하는 것을 원할 수 있습니다.기본적으로 '터치 시작'에 이어 클릭 시뮬레이션을 위한 '터치 시작'을 빠르게 보는 것입니다.

위의 코드 감사합니다! - 여러가지 방법을 시도해봤는데 이게 표였습니다.preventDefault가 ipad에서 스크롤을 방지하는 문제가 있었습니다. 드래그 가능한 항목을 테스트하고 있는데 지금까지 잘 작동합니다.

if (event.target.id == 'draggable_item' ) {
    event.preventDefault();
}

저는 gregpress 답변과 같은 솔루션을 사용했지만 드래그 가능한 아이템은 id 대신 클래스를 사용했습니다.효과가 있는 것 같습니다.

var $target = $(event.target);  
if( $target.hasClass('draggable') ) {  
    event.preventDefault();  
}

내가 아는 오래된 실...

@류우타츠오의 답변의 문제점은 '클릭'(예를 들어 입력)에서 반응해야 하는 입력 또는 다른 요소도 차단한다는 점입니다.이 솔루션을 사용하면 터치 장치(또는 컴퓨터)에서 마우스 다운, 마우스 이동 및 마우스 업 이벤트를 기반으로 하는 기존 드래그 앤 드롭 라이브러리를 사용할 수 있습니다.이는 크로스 브라우저 솔루션이기도 합니다.

여러 장치에서 테스트해 보았는데 빠르게 작동합니다(ThreeDubMedia의 드래그 앤 드롭 기능과 함께). (http://threedubmedia.com/code/event/drag)) 참조).jQuery 솔루션이므로 jQuery libs에서만 사용할 수 있습니다.일부 새로운 기능이 IE9 이상에서 제대로 작동하지 않기 때문에 jQuery 1.5.1을 사용했습니다(새로운 버전의 jQuery에서는 테스트되지 않음).

이벤트에 드래그 또는 드롭 작업을 추가하기 전에 먼저 이 함수를 호출해야 합니다.

simulateTouchEvents(<object>);

또한 다음 구문을 사용하여 모든 구성 요소/소아를 입력하거나 이벤트 처리 속도를 높일 수 있습니다.

simulateTouchEvents(<object>, true); // ignore events on childs

여기 제가 작성한 코드가 있습니다.평가 속도를 높이기 위해 몇 가지 멋진 묘기를 사용했습니다(코드 참조).

function simulateTouchEvents(oo,bIgnoreChilds)
{
 if( !$(oo)[0] )
  { return false; }

 if( !window.__touchTypes )
 {
   window.__touchTypes  = {touchstart:'mousedown',touchmove:'mousemove',touchend:'mouseup'};
   window.__touchInputs = {INPUT:1,TEXTAREA:1,SELECT:1,OPTION:1,'input':1,'textarea':1,'select':1,'option':1};
 }

$(oo).bind('touchstart touchmove touchend', function(ev)
{
    var bSame = (ev.target == this);
    if( bIgnoreChilds && !bSame )
     { return; }

    var b = (!bSame && ev.target.__ajqmeclk), // Get if object is already tested or input type
        e = ev.originalEvent;
    if( b === true || !e.touches || e.touches.length > 1 || !window.__touchTypes[e.type]  )
     { return; } //allow multi-touch gestures to work

    var oEv = ( !bSame && typeof b != 'boolean')?$(ev.target).data('events'):false,
        b = (!bSame)?(ev.target.__ajqmeclk = oEv?(oEv['click'] || oEv['mousedown'] || oEv['mouseup'] || oEv['mousemove']):false ):false;

    if( b || window.__touchInputs[ev.target.tagName] )
     { return; } //allow default clicks to work (and on inputs)

    // https://developer.mozilla.org/en/DOM/event.initMouseEvent for API
    var touch = e.changedTouches[0], newEvent = document.createEvent("MouseEvent");
    newEvent.initMouseEvent(window.__touchTypes[e.type], true, true, window, 1,
            touch.screenX, touch.screenY,
            touch.clientX, touch.clientY, false,
            false, false, false, 0, null);

    touch.target.dispatchEvent(newEvent);
    e.preventDefault();
    ev.stopImmediatePropagation();
    ev.stopPropagation();
    ev.preventDefault();
});
 return true;
}; 

작업 내용:처음에는 싱글 터치 이벤트를 마우스 이벤트로 변환합니다.이벤트가 끌어다 놓아야 하는 요소의 온/온/온/인 요소에 의해 발생하는지 확인합니다.입력, 텍스트 영역 등의 입력 요소인 경우 번역을 생략하거나 표준 마우스 이벤트가 첨부된 경우에도 번역을 생략합니다.

결과: 드래그 가능한 요소의 모든 요소가 여전히 작동 중입니다.

Happy coding, greetz, Erwin Haantjes

언급URL : https://stackoverflow.com/questions/5186441/javascript-drag-and-drop-for-touch-devices