Question

我通过android实现了简单的webview应用程序指向一个html文件，该文件将用于拖放图标，就像一个简单的益智游戏。我使用jquery draggable和droppable库在html端实现，但是当我在webview上提取它时，它没有用。在搜索论坛后，我尝试了几个修复程序，但没有一个有效。我认为这篇文章可能就是答案，但它也没有成功：Javascript Drag and drop for touch devices。虽然，我认为我没有正确实现它，因为我只是将它添加到使用jquery.ui中的draggable / droppable的代码中。

这是可拖动/可放置的代码：

 $(document).ready(function() {
    init(); 
 $( "#draggable" ).draggable({
            snap:"#droppable", snapMode: "inner", revert: "valid"});
    $( "#droppable" ).droppable({
        drop: function( event, ui ) {
            $( this )
                .addClass( "ui-state-highlight" )
                .find( "p" )
                    .html( "Dropped!" );
        },
        out: function( event, ui ) {
            $( this )
                .removeClass( "ui-state-highlight" )
                .find( "p" )
                    .html( "Drop here" );
        }
    });
  });

这是触摸处理程序实现：

 function touchHandler(event)
{
 var touches = event.changedTouches,
first = touches[0],
type = "";

 switch(event.type)
{
case "touchstart": type = "mousedown"; break;
case "touchmove":  type="mousemove"; break;        
case "touchend":   type="mouseup"; break;
default: return;
}
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(type, true, true, window, 1,
                      first.screenX, first.screenY,
                      first.clientX, first.clientY, false,
                      false, false, false, 0/*left*/, null);

first.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);    
}

在html的正文中，我使用div来调用draggable和droppable。不知道为什么它不起作用...任何指导将不胜感激。

Answer 1

好的，所以经过一段时间的努力，我遇到了这个类似的东西，但允许基于触摸的拖放。希望它对你有用。 http://www.stevefenton.co.uk/Content/Jquery-Mobile-Drag-And-Drop/

如何通过android webview实现拖放

1 个答案: