드래그 앤 드롭 자바 스크립트는 모바일 장치

Tutorial for HTML5 drag&drop - sortable list 드래그 앤 드롭 자바 스크립트는 모바일 장치

작동하지 그러나 스크립트는 모바일 장치에서 작동하지 않습니다. 나는 sortable.js와 플러그인을 시도했다. 모두 프로젝트를 위해 작동하지 않습니다. 이것은 나를 도왔다. 일부 모바일 장치가 이벤트를 끌어 듣지 않기 때문에 그러나 모바일 장치 (jQuery를 또는 다른 라이브러리를 사용하지 않고)

<ul> 
 
    <li draggable="true" ondragenter="dragenter(event)" ondragstart="dragstart(event)">Apples</li> 
 
    <li draggable="true" ondragenter="dragenter(event)" ondragstart="dragstart(event)">Oranges</li> 
 
    <li draggable="true" ondragenter="dragenter(event)" ondragstart="dragstart(event)">Bananas</li> 
 
    <li draggable="true" ondragenter="dragenter(event)" ondragstart="dragstart(event)">Strawberries</li> 
 
</ul> 
 
<script type="text/javascript"> 
 
    var source; 
 

 
    function isbefore(a, b) { 
 
    if (a.parentNode == b.parentNode) { 
 
     for (var cur = a; cur; cur = cur.previousSibling) { 
 
     if (cur === b) { 
 
      return true; 
 
     } 
 
     } 
 
    } 
 
    return false; 
 
    } 
 

 
    function dragenter(e) { 
 
    if (isbefore(source, e.target)) { 
 
     e.target.parentNode.insertBefore(source, e.target); 
 
    } 
 
    else { 
 
     e.target.parentNode.insertBefore(source, e.target.nextSibling); 
 
    } 
 
    } 
 

 
    function dragstart(e) { 
 
    source = e.target; 
 
    e.dataTransfer.effectAllowed = 'move'; 
 
    } 
 

 
</script>

출처

2017-01-30 Crock

[jQuery를 터치 펀치] (http://touchpunch.furf.com/)는이에 대해서만 이루어진다. –

@SorangwalaAbbasali 만 드래그 가능합니까? 이 js의 나머지는 작동할까요? – Crock

@SorangwalaAbbasali Im 확실하지 않습니다. Jquery 터치 펀치는 jQuery UI의 끌어서 놓기만을 지원합니다 .. 알고있는 것만 큼 .. –

질문의 답을 작업하는 것은.

나는 당신과 같은 문제를 공유한다고 생각하는이 질문을보십시오.

html5 drag and drop FOR MOBILE

는

대부분의 모바일 장치는 DOM에 바인딩 된 드래그 이벤트를 수신하지 않습니다. touchmove 이벤트와 함께 사용하는 이벤트를 사용하는 것이 좋습니다. 그것은과 같이 보일 것이다 : 당신은 시도해야

<!DOCTYPE HTML> 
<html> 
<head> 
<style type="text/css"> 
     #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} 
</style> 
</head> 
<body> 

<p>Drag the W3Schools image into the rectangle:</p> 

<div id="div1"></div> 
<br> 
<img id="drag1" src="img_logo.gif width="336" height="69"> 

<script type="text/javascript"> 
    var el = document.getElementById('drag'); 

    el.addEventListener("touchstart", handleStart, false); 
    el.addEventListener("touchend", handleEnd, false); 
    el.addEventListener("touchcancel", handleCancel, false); 
    el.addEventListener("touchleave", handleEnd, false); 
    el.addEventListener("touchmove", handleMove, false); 

    function handleStart(event) { 
     // Handle the start of the touch 
    } 

    //^Do the same for the rest of the events 

</script> 
</body> 
</html>

출처

2017-01-30 13:01:40 Atska

나는 시도했다 당신의 대답은 우리가 기대하는 것을 볼 수 있습니다. – Crock

드래그 앤 드롭 자바 스크립트는 모바일 장치

답변

관련 문제