[JQUERY] 터치 장치 자바 드래그 앤 드롭 [폐쇄]

터치 장치 자바 드래그 앤 드롭 [폐쇄]

해결법

1. ---

   1.당신은 드래그에 대한 JQuery와 UI를 사용하고 당신이 필요로되는 터치로 마우스 이벤트를 변환하는 추가 라이브러리를 삭제할 수 있습니다, 내가 추천하는 라이브러리로, https://github.com/furf/jquery-ui-touch-punch입니다 jQuery를 UI에서이 사용자의 드래그 앤 드롭 터치 심지에서 작동해야

   당신은 드래그에 대한 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);
   }
   

   그리고 당신의 document.ready 단지 초기화 () 함수를 호출

   코드는 여기에서 발견

2. ---

   2.(요한 Landheer 그의 주석에서 언급으로)보고 사람이를 사용하고 '클릭'기능을 유지하기 위해, 당신은 수정의 단지 몇 함께 할 수 있습니다 :

   (요한 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;
   }
   

   당신은 당신의 취향 'clickms'을 조정할 수 있습니다. 기본적으로이 단지에 대해 지켜보고 A '는 touchstart'클릭을 시뮬레이션하기 위해 'touchend'에 의해 신속하게 따랐다.

3. ---

   3.위의 코드에 대한 감사합니다! - 나는 몇 가지 옵션을 시도하고이 표했다. 로 preventDefault 아이 패드에서 스크롤을 방지 한 점에서 나는 문제가 있었다 - 지금은 드래그 항목에 대한 테스트입니다 그리고 그것은 지금까지 잘 작동합니다.

   위의 코드에 대한 감사합니다! - 나는 몇 가지 옵션을 시도하고이 표했다. 로 preventDefault 아이 패드에서 스크롤을 방지 한 점에서 나는 문제가 있었다 - 지금은 드래그 항목에 대한 테스트입니다 그리고 그것은 지금까지 잘 작동합니다.

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

4. ---

   4.나는 gregpress 대답과 같은 솔루션을했다,하지만 내 드래그 항목은 ID 대신 클래스를 사용했다. 그것은 작동하는 것 같다.

   나는 gregpress 대답과 같은 솔루션을했다,하지만 내 드래그 항목은 ID 대신 클래스를 사용했다. 그것은 작동하는 것 같다.

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

5. ---

   5.내가 아는 오래된 스레드 .......

   내가 아는 오래된 스레드 .......

   @ryuutatsuo의 응답에 문제가 또한 블록 (예를 들어 입력 용) '클릭'에 대응하는 임의의 입력 또는 다른 소자, 그래서이 용액을 쓴 것이다. 이 솔루션은 가능한 모든 터치 장치 (또는 cumputer)에 mousedown, MouseMove 이벤트와와 mouseUp 이벤트를 기반으로 기존의 드래그 앤 드롭 라이브러리를 사용했다. 이것은 또한 크로스 브라우저 솔루션입니다.

   나는 여러 장치에서 테스트 한 빨리 작업 (ThreeDubMedia의 드래그 앤 드롭 기능을 조합 (참조 또한 http://threedubmedia.com/code/event/drag)). 당신은 단지 jQuery를 libs와 함께 사용할 수 있도록 그것은 jQuery를 솔루션입니다. 일부 최신 기능은 위의 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;
   }; 
   

   그것은 무엇을 : 처음에는 마우스 이벤트에 하나의 터치 이벤트를 변환합니다. 이 검사는 이벤트에 주위 드래그해야 요소 / 요소에 의해 발생 된 경우. 이 텍스트 영역 등을 입력, 같은 입력 요소 인 경우에는 번역을 건너 뛰거나, 표준 마우스 이벤트가 그것에 연결되어있는 경우, 또한 번역을 건너 뜁니다.

   결과: 드래그 요소의 모든 요소는 여전히 노력하고 있습니다.

   행복, greetz, 코딩 어윈 Haantjes

from https://stackoverflow.com/questions/5186441/javascript-drag-and-drop-for-touch-devices by cc-by-sa and MIT license