HTML5帶觸摸功能的拖放功能

首先，我製作了一個自適應網站，因此我使用這種拖放功能以及鼠標功能和觸摸功能。在我在互聯網上搜索後，我發現這個建議：http://touchpunch.furf.com/。唯一的問題是，這對我沒有幫助。HTML5帶觸摸功能的拖放功能

我想這是因爲可能需要JavaScript。

我對正常觸摸功能（鼠標）代碼如下所示：

HTML

<div id="dragzone" ondrop="drop(event)" ondragover="allowDrop(event)"> 
    <img id="drag1" src="img/perso_paintball.png" draggable="true" 
      ondragstart="drag(event)" width="80" height="80"> 

    <img id="drag2" src="img/family_picture.png" draggable="true" 
      ondragstart="drag(event)" width="80" height="80"> 

    <img id="drag3" src="img/Tøse-hygge.png" draggable="true" 
      ondragstart="drag(event)" width="80" height="80"> 

    <img id="drag4" src="img/romantisk.png" draggable="true" 
      ondragstart="drag(event)" width="80" height="80"> 
</div>

jQuery的

<script> 
    function allowDrop(ev) { 
     ev.preventDefault(); 
    } 

    function drag(ev) { 
     ev.dataTransfer.setData("Text", ev.target.id); 
    } 

    function drop(ev) { 
     ev.preventDefault(); 
     var data = ev.dataTransfer.getData("Text"); 
     ev.target.appendChild(document.getElementById(data)); 
    } 
</script>

此代碼工作正常，當我只想將一張圖片從一個區域拖放到另一個區域。但我已經嘗試了每一個建議，以便像使用鼠標一樣進行觸摸拖放操作。

我是否需要離開這個簡單的代碼到一些真正的JavaScript來使用touchpunch中的這個「黑客」？

或者我可以以某種方式使這段代碼與觸摸一起工作嗎？

如果你想知道那麼這段代碼是來自W3schools。 :)

來源

2014-05-06 Martin

Firstival，我會建議擺脫內聯事件處理程序（如：ondragstart="drag(event)「）的。

正如我所看到的，你使用HTML5拖放和拖放API，這是很好的，但將有問題與瀏覽器兼容（比如，它不會在IE < 10工作）。

有它的工作不錯，在大多數瀏覽器以及我會建議使用這樣的jQuery的UI部件如sortable和draggable採用觸摸式衝頭在大多數情況下會做處理觸摸事件的工作。

Sh您需要調用可拖動功能的代碼示例，您可以在jquery-ui網站上找到它。

來源

2014-05-06 10:52:47 mms27

HTML5帶觸摸功能的拖放功能

回答

相關問題