拖放的Javascript不工作的移動設備

Tutorial for HTML5 drag&drop - sortable list 拖放的Javascript不工作的移動設備

但腳本不工作在移動設備上。我曾嘗試sortable.js和插件。所有這些都不適用於項目。這幫助了我。但是，移動設備正在

<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我不確定.. jquery touch punch只支持jQuery ui的拖拽..盡我所知.. –

你的問題的答案（不使用jQuery或其他庫）是因爲某些移動設備不聽拖動事件。

看看這個問題，我相信你和你有同樣的問題。

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

拖放的Javascript不工作的移動設備

回答

相關問題